/* Reset & Base Styles */
 @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
 
/* Hero Section Container */

 /* ************************************************** Index Page Banner Css *******************************************************************************************/
 


/* Main website sections */
section,
header,
footer {
    width: 100%;
}

/* Desktop content */
@media (min-width: 1200px) {
    .container,
    .main-container,
    .page-wrapper {
        width: 100%;
        max-width: none;
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
    }
}




* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Figtree', sans-serif;
        }
.hero-container {
    
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px 20px;
    
    
	
}

/* Text Content Area */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-title {
    
   
    margin-bottom: 24px;
    line-height: 1.25;
	font-weight: 700;
	  
  font-size: 16px;
}

.hero-title span {
    color: #1e63d3; /* Vibrant blue matching the image */
}

.hero-description {
    font-size: 16px;
    color: black;
    margin-bottom: 36px;
    max-width: 480px;
    font-weight: 500;
	text-align:justify
}

/* Call to Action Buttons */
.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    text-align: center;
}

.btn-primary {
    background-color: #1e63d3;
    color: #ffffff;
    border: 2px solid #1e63d3;
}

.btn-primary:hover {
   background-color: #213559;  
    border-color: #154fb1;
}

.btn-secondary {
    background-color: transparent;
    color: #1e63d3;
    border: 2px solid #1e63d3;
}

.btn-secondary:hover {
    background-color: #213559;  
}

/* Graphic/Image Area */
.hero-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* --- Responsive Media Queries --- */

/* Desktop Screens (Tablet Landscape and up) */
@media (min-width: 768px) {
    .hero-container {
        grid-template-columns: 1.1fr 0.9fr; /* Splits layout into two columns */
        gap: 60px;
    }

    .hero-title {
        font-size: 22px;
    }
}

/* Large Screens */
@media (min-width: 1024px) {
    .hero-title {
        font-size: 2.2rem;
    }
}



/* ************************************************** About Us Css *******************************************************************************************/


/* Banner Container */
.about-banner {
    width: 100%;
    min-height: 450px; /* Ensures plenty of vertical space for the background image */
    /* Adjust 'image_8eb2d8.jpg' to the path where your image is saved */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0) 50%), 
                url('../../img/about_us.png') no-repeat center right;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 40px 20px;
    position: relative;
}

.estateadmin-banner{

width: 100%;
    min-height: 324px; /* Ensures plenty of vertical space for the background image */
    /* Adjust 'image_8eb2d8.jpg' to the path where your image is saved */
    background:  url('../../img/estate_admin1.png') no-repeat center right;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 40px 20px;
    position: relative;
}

/* Inner constraints matching standard desktop layouts */
.adminbanner-container {
    max-width: 1161px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Breadcrumb Styles */
.breadcrumb {
    font-size: 0.85rem;
    color: #666666;
    margin-bottom: 30px;
}

.breadcrumb a {
    color: #333333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #1e63d3;
}

.breadcrumb .active {
    color: #1e63d3;
    font-weight: 500;
}

/* Content Text Area */
.banner-content {
    max-width: 500px; /* Restricts text width so it doesn't overlap the focal point of the image */
}

.banner-title {
    font-size: 2.9rem;
    font-weight: 700;
    color: #1e63d3; /* Vivid brand blue from your previous page theme */
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.adminbanner-text {
    font-size: 1.05rem;
     text-align: justify;
    line-height: 1.6;
	font-weight: 600;
}

/* --- Responsive Layout for Mobile & Tablets --- */

@media (max-width: 768px) {
    .about-banner {
        /* Flips gradient vertically on smaller mobile views so the text reads clearly on top */
        background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0) 50%), 
                url('../../img/about_us.png') no-repeat center right;
        background-size: cover;
        min-height: auto;
        padding: 60px 16px;
    }

    .banner-title {
        font-size: 2.5rem; /* Scales title size down gracefully on small screens */
        margin-bottom: 15px;
    }

    .banner-text {
        font-size: 1rem;
    }
}




.breadcrumb-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
}

/* Flexbox alignment for the list */
.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    flex-wrap: wrap; /* Prevents breaking on ultra-small screens */
    gap: 6px; 
}

/* Item font rules */
.breadcrumb-item, 
.breadcrumb-separator {
    font-size: 0.875rem; /* ~14px standard clean UI size */
    line-height: 1.5;
}

/* Inactive/Link Styling */
.breadcrumb-link {
    color: #333333; /* Dark gray/black tone matching 'Home' */
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease-in-out;
}

.breadcrumb-link:hover {
    color: #1e63d3; /* Hover highlight effect */
}

/* Divider Styling */
.breadcrumb-separator {
    color: #666666;
    user-select: none; /* Prevents highlighting the slash text */
}

/* Active/Current Page Styling */
.breadcrumb-item.active {
    color: #1e63d3; /* Vibrant blue matching 'About Us' */
    font-weight: 500;
}

/* --- Responsive Adaptations --- */
@media (max-width: 480px) {
    .breadcrumb-container {
        padding: 6px 8px; /* Tighter paddings for compact mobile environments */
    }
    
    .breadcrumb-item, 
    .breadcrumb-separator {
        font-size: 0.813rem; /* Drops font-size slightly (~13px) for smaller displays */
    }
}







/* ************************************************** Footer  Css *******************************************************************************************/


/* Footer Wrapper Styling */
.site-footer {
    background-color: #186AD0; /* Vibrant blue background matching image_8cdce2.png */
    color: rgba(255, 255, 255, 0.9);
    padding: 70px 20px 30px 20px;
}

.footer-container {
    /* max-width: 1200px;*/
    width: 100%;
    margin: 0 auto;
}

/* 1. Top Section - Grid Setup */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 50px;
}

/* Brand Column styling */
.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CSS-built replica of the brand logo */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 28px;
}

.logo-icon span {
    display: block;
    height: 4px;
    background-color: #ffffff;
    border-radius: 2px;
    transform: skewX(-15deg);
}

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

.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.brand-sub {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
}

.brand-description {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 320px;
    color: rgba(255, 255, 255, 0.85);
}

/* Links Columns Styling */
.column-heading {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    color: #ffffff;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* 2. Middle Section - Gateway Logos */
.footer-payments-section {
    padding-bottom: 40px;
}

.payment-heading {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
}

.payment-logos {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Replicating the mock bank button styles from the image graphic */
.logo-placeholder {
    height: 45px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

 
 

 
.maybank-placeholder {
     
}

/* 3. Bottom Section - Copyright Center Footer */
 .footer-bottom {
    /* Subtle border line on top */
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    padding-top: 30px;
    margin-top: 20px;
    text-align: center;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8); /* Reverting text to white/grey to keep contrast against blue */

    /* --- Core logic to make the border stretch completely edge-to-edge --- */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
/* --- Responsive Media Rules --- */

/* Tablet Screens Landscape downwards */
@media (max-width: 992px) {
    .footer-main-grid {
        grid-template-columns: 1fr 1fr; /* Switch to 2x2 layout columns */
        gap: 30px;
    }
}

/* Mobile Screens */
@media (max-width: 576px) {
    .site-footer {
        padding: 45px 15px 25px 15px;
    }

    .footer-main-grid {
        grid-template-columns: 1fr; /* Fully single-column stacked format */
        gap: 35px;
    }
    
    .column-heading {
        margin-bottom: 15px;
    }

    .brand-description {
        max-width: 100%;
    }

    .footer-payments-section {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 25px;
    }
}


/* ************************************************** Footer  Css *******************************************************************************************/



/* ************************************************** Home page Services Start  *******************************************************************************************/



.services-container {
     
    width: 100%;
    margin: 0 auto;
}

/* --- Header Styles --- */
.services-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 10px;
}

.services-header .sub-title {
    color: #1e62d0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 8px;
}

.services-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.2;
    margin-bottom: 20px;
}

.services-header h1 .highlight {
    color: #1e62d0;
    position: relative;
}

.services-header .description {
    color: #666666;
    font-size: 1.1rem;
    max-width: 680px;
    margin: 0 auto;
}

.mobile-break {
    display: none;
}

/* --- Cards Layout Grid --- */
.cards-grid {
    display: flex;
     
    gap: 25px;
     
    margin-top: 20px;
}

/* --- Individual Card Design --- */
.card {
    background: #ffffff;
    border: 1px solid #dbeafe; /* Soft light blue border */
    border-radius: 12px;
    padding: 35px 30px;
    flex: 1;
    min-width: 300px;
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover Effect for Card */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(30, 98, 208, 0.08);
    border-color: #bfdbfe;
}

/* Icon Containers */
.icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.icon-wrapper svg {
    width: 28px;
    height: 28px;
}

/* Dynamic color variants matched to your layout */
.icon-yellow { background-color: #fef3c7; }
.icon-red    { background-color: #fee2e2; }
.icon-blue   { background-color: #9AC7F8; }


/* Card Content Typography */
.card h3 {
    font-size: 1.25rem;
    color: #111111;
    font-weight: 700;
    margin-bottom: 15px;
}

.card p {
    color: #555555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Aligns buttons evenly if text length varies */
}

/* Learn More Links */
.card .learn-more {
    color: #1e62d0;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.card .learn-more .arrow {
    margin-left: 8px;
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.card .learn-more:hover {
    color: #124ba3;
}

.card .learn-more:hover .arrow {
    transform: translateX(5px);
}

/* --- Responsive Media Queries --- */
@media (max-width: 992px) {
    .cards-grid {
        gap: 20px;
    }
    .card {
        max-width: 45%;
    }
}

@media (max-width: 768px) {
    body {
       /* padding: 40px 15px;*/
    }
    .services-header h1 {
        font-size: 2.2rem;
    }
    .mobile-break {
        display: block;
    }
    .cards-grid {
        flex-direction: column;
        align-items: center;
    }
    .card {
        max-width: 100%;
        width: 100%;
        padding: 30px 24px;
    }
}



/* ************************************************** Home page Services End  *******************************************************************************************/


/* ************************************************** Home page Affiliates Start  *******************************************************************************************/




/* --- Affiliates Section Styles --- */
.affiliates-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif; /* Fallback to your main theme font */
    width: 100%;
    box-sizing: border-box;
}

.affiliates-container {
    max-width: none;
    margin: 0 auto;
}

/* Header Text formatting matching image_042021.png */
.affiliates-header {
    text-align: center;
    margin-bottom: 45px;
}

.affiliates-subtitle {
    color: #1e62d0;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
}

.affiliates-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.affiliates-title .highlight-blue {
    color: #1e62d0;
}

.affiliates-desc {
    color: #777777;
    font-size: 1.05rem;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Logos Flex/Grid Wrap */
.logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Individual Logo Border Card Box */
.logos-grid .logo-card {
    background: #ffffff;
    border: 1px solid #e2e8f0; /* Muted gray border */
    border-radius: 10px;
    width: calc(12.5% - 18px); /* Clean desktop sizing scaling across line */
    min-width: 130px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Interactive soft pop for clean user experience */
.logos-grid .logo-card:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
}

/* Responsive Image Constrain */
.logos-grid .logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(10%) contrast(95%); /* Keeps logos looking consistent if needed */
}

/* --- Responsive Media Breaks --- */
@media (max-width: 1024px) {
    .logos-grid .logo-card {
        width: calc(25% - 15px); /* 4 logos per row on smaller desktops/tablets */
    }
}

@media (max-width: 768px) {
    .affiliates-section {
        padding: 40px 15px;
    }
    .affiliates-title {
        font-size: 2rem;
    }
    .logos-grid {
        gap: 15px;
    }
    .logos-grid .logo-card {
        width: calc(33.33% - 10px); /* 3 logos per row on mobile-vertical screen sizes */
        min-width: 110px;
        height: 95px;
    }
}

@media (max-width: 480px) {
    .logos-grid .logo-card {
        width: calc(50% - 10px); /* 2 logos per row on tiny smartphone viewports */
    }
}



/* ************************************************** Home page Affiliates End  *******************************************************************************************/


/* ************************************************** Home page Engagement start  *******************************************************************************************/



/* --- Industry Engagement Section Styles --- */
.engagement-section {
    padding: 80px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.engagement-container {
    max-width: none;
    margin: 0 auto;
}

/* Header Text Styles */
.engagement-header {
    text-align: center;
    margin-bottom: 60px;
}

.engagement-subtitle {
    color: #1e62d0;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.engagement-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 18px;
}

.engagement-title .highlight-blue {
    color: #1e62d0;
}

.engagement-desc {
    color: #777777;
    font-size: 1.1rem;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Responsive Grid/Flex Row Configuration */
.engagement-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Left Column: Awards Grid */
.engagement-badges-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: flex-start;
}

.engagement-badges-col .badge-item {
    width: 100%;
    max-width: 260px;
    display: flex;
    justify-content: center;
}

.engagement-badges-col .badge-item img {
    width: 80%;
    height: auto;
    object-fit: contain;
}

/* Center Column: WIED Core Logo */
.engagement-main-logo-col {
    flex: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.engagement-main-logo-col img {
    width: 66%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
}

/* Right Column: Certificate Showcase (with soft aesthetic shadow) */
.engagement-doc-col {
     
    display: flex;
    justify-content: right;
    align-items: right;
}

.engagement-doc-col .doc-shadow-wrapper {
    width: 100%;
    max-width: 350px;
    border-radius: 4px;
    background: #ffffff;
    /* Soft premium drop-shadow effect replicating the source image background depth */
    box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.12), 
                -2px 0px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
}

.engagement-doc-col .doc-shadow-wrapper:hover {
    transform: translateY(-5px);
}

.engagement-doc-col .doc-shadow-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* --- Responsive Layout Breakpoints --- */

/* Tablet & Landscape Viewports */
@media (max-width: 992px) {
    .engagement-content-row {
        gap: 30px;
    }
    .engagement-title {
        font-size: 2.2rem;
    }
    .engagement-badges-col .badge-item {
        max-width: 210px;
    }
    .engagement-main-logo-col img {
        max-width: 280px;
    }
    .engagement-doc-col .doc-shadow-wrapper {
        max-width: 300px;
    }
}

/* Mobile Viewports (Vertical Stack) */
@media (max-width: 768px) {
    .engagement-section {
        padding: 50px 15px;
    }
    .engagement-header {
        margin-bottom: 40px;
    }
    .engagement-title {
        font-size: 2rem;
    }
    .engagement-content-row {
        flex-direction: column;
        gap: 50px; /* Space out elements cleanly when vertical */
        text-align: center;
    }
    .engagement-badges-col {
        flex-direction: row; /* Badges display side-by-side on mobile screens */
        justify-content: center;
        width: 100%;
        gap: 20px;
    }
    .engagement-badges-col .badge-item {
        max-width: 160px;
    }
    .engagement-main-logo-col img {
        max-width: 260px;
    }
    .engagement-doc-col .doc-shadow-wrapper {
        max-width: 280px;
    }
}

/* ************************************************** Home page Engagement End  *******************************************************************************************/



/* ************************************************** Home page Testimonial  Start  *******************************************************************************************/



/* --- CTA & Testimonial Section Scoped Styles --- */
.cta-testi-wrapper {
    width: 100%;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.cta-testi-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* --- 1. Blue CTA Banner Styles --- */
.cta-testi-banner {
    background-color: #1e62d0; /* Rich branding blue matching your images */
    padding: 70px 0;
    width: 100%;
}

.cta-testi-banner-title {
    color: #ffffff;
    font-size: 2.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.cta-testi-banner-desc {
    color: rgba(255, 255, 255, 0.85); /* Clean white opacity text */
    font-size: 1.05rem;
    max-width: 660px;
    margin: 0 auto 35px auto;
    line-height: 1.6;
}

/* CTA Pill Button styling */
.cta-testi-btn {
    display: inline-block;
    background-color: #ffffff;
    color: #1e62d0;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 36px;
    border-radius: 9px; /* Fully rounded capsule button */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Interactive hover feedback */
.cta-testi-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    background-color: #f8fafc;
}

/* --- 2. Testimonials Header Styles --- */
.cta-testi-intro {
    padding: 70px 0 30px 0;
    background-color: #ffffff;
}

.cta-testi-subtitle {
    color: #1e62d0;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.cta-testi-main-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.5px;
}

/* Line break management default state */
.cta-mobile-break {
    display: none;
}

/* --- Responsive Media Queries --- */

/* Tablet & Smaller Desktops */
@media (max-width: 992px) {
    .cta-testi-banner-title {
        font-size: 2.1rem;
    }
    .cta-testi-main-title {
        font-size: 2.2rem;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .cta-testi-banner {
        padding: 50px 0;
    }
    .cta-testi-intro {
        padding: 50px 0 20px 0;
    }
    .cta-testi-banner-title {
        font-size: 1.75rem;
    }
    .cta-mobile-break {
        display: block; /* Wraps heading cleaner on skinny screens */
    }
    .cta-testi-banner-desc {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }
    .cta-testi-btn {
        padding: 12px 30px;
        font-size: 0.95rem;
    }
    .cta-testi-main-title {
        font-size: 1.85rem;
    }
}

/* ************************************************** Home page Testimonial  End  *******************************************************************************************/

/* ************************************************** Home page Get In Touch Section start **************************************************************************************/


/* --- Get In Touch Section Scoped Styles --- */
.git-section {
    padding: 80px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.git-container {
   /*  max-width: 1200px;*/
    margin: 0 auto;
}

/* Header Elements matching image_f2c03d.png */
.git-header {
    text-align: center;
    margin-bottom: 40px;
}

.git-subtitle {
    color: #1e62d0;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.git-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.git-title .highlight-blue {
    color: #1e62d0;
}

.git-desc {
    color: #666666;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Flex Container for Call & Email Actions */
.git-buttons-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 80px;
}

/* Universal Button Bases */
.git-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    height: 60px;
    min-width: 240px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.git-icon {
    width: 22px;
    height: 22px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Phone Layout Border Design */
.git-btn-phone {
    background-color: #ffffff;
    color: #1e62d0;
    border: 1px solid #1e62d0;
}

.git-btn-phone .git-icon {
    fill: #eab308; /* Yellow phone icon matching image_f2c03d.png */
}

.git-btn-phone:hover {
    background-color: #f0f6ff;
    transform: translateY(-2px);
}

/* Email Solid Color Layout */
.git-btn-email {
    background-color: #1e62d0;
    color: #ffffff;
    border: 1px solid #1e62d0;
}


.git-btn-email:hover {
    background-color: #f0f6ff; /* Soft light blue background on hover */
    color: #1e62d0;            /* Smooth transition from white to blue text */
    transform: translateY(-2px); /* Matches the phone button interaction */
}
 

/* Bottom Trust Badges Flex */
.git-trust-badges {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    /*max-width: 900px;*/
    margin: 0 auto;
}

.git-badge-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.git-badge-img-wrapper {
    height:53px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.git-badge-img-wrapper img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.git-badge-item span {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111111;
}

/* Prevent unwanted breaks inside badge labels */
.git-badge-item span {
    white-space: nowrap;
}

/* Responsive Helper Linebreaks */
.git-mobile-break {
    display: none;
}

/* --- Responsive Media Queries --- */

@media (max-width: 992px) {
    .git-trust-badges {
        gap: 30px;
    }
    .git-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .git-section {
        padding: 50px 15px;
    }
    .git-title {
        font-size: 1.85rem;
    }
    .git-mobile-break {
        display: block;
    }
    .git-buttons-group {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 50px;
    }
    .git-btn {
        width: 100%;
        max-width: 320px;
    }
    .git-trust-badges {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2x2 grid setup on smaller mobile */
        gap: 30px 20px;
        max-width: 400px;
    }
}

/* ************************************************** Home page Get In Touch Section End **************************************************************************************/



/* ************************************************** wasiat page  Section start **************************************************************************************/




/* --- What is a Will Section Scoped Styles --- */
.will-intro-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.will-intro-container {
    max-width: 1178px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Vertically centers the text with the image */
    justify-content: space-between;
    gap: 50px;
}

/* --- Left Column Elements --- */
.will-intro-content-col {
    flex: 1.2; /* Takes slightly more horizontal space for text comfort */
}

.will-intro-tagline {
    color: #eab308; /* Premium golden yellow tag color matching your image */
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 12px;
}

.will-intro-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.will-intro-title .highlight-blue {
    color: #1e62d0; /* Signature theme blue line accent */
}

.will-intro-text {
    color: #222222;
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 640px;
    text-align: justify; /* Matches text alignment layout standard from the sample */
}

/* --- Right Column Image Elements --- */
.will-intro-image-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.will-intro-img-wrapper {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3; /* Optional placeholder box aspect consistency constraint */
}

.will-intro-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; /* Clean, modern rounded corners exactly like the source graphic */
}

/* --- Responsive Media Queries --- */

/* Tablet & Intermediate Views */
@media (max-width: 992px) {
    .will-intro-container {
        gap: 30px;
    }
    .will-intro-title {
        font-size: 2.2rem;
    }
    .will-intro-text {
        font-size: 1rem;
    }
}

/* Mobile Screens (Stacked Layout) */
@media (max-width: 768px) {
    .will-intro-section {
        padding: 40px 15px;
    }
    .will-intro-container {
        flex-direction: column; /* Flips side-by-side components into vertical columns */
        gap: 35px;
    }
    .will-intro-content-col {
        width: 100%;
    }
    .will-intro-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    .will-intro-text {
        text-align: left; /* Better UI accessibility rendering on small devices */
    }
    .will-intro-image-col {
        width: 100%;
    }
    .will-intro-img-wrapper {
        max-width: 100%; /* Expands naturally to fit horizontal smartphone layout windows */
        height: auto;
    }
}


/* ************************************************** wasiat page  Section End **************************************************************************************/

/* ************************************************** wasiat page   WHY IT MATTERS staret **************************************************************************************/



/* --- Why It Matters Section Scoped Styles --- */
.will-matters-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.will-matters-container {
    max-width: 1171px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Keeps everything vertically aligned center */
    justify-content: space-between;
    gap: 60px;
}

/* --- Left Column Image Elements --- */
.will-matters-image-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.will-matters-img-wrapper {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
}

.will-matters-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; /* Matches the exact rounded aesthetics from your previous layout templates */
}

.hibah-matters-img-wrapper img {
/*    width: 100%;
    height: 100%;
*/    object-fit: cover;
    border-radius: 20px; /* Matches the exact rounded aesthetics from your previous layout templates */
}

/* --- Right Column Content Elements --- */
.will-matters-content-col {
    flex: 1.3; /* Gives the detailed list more line space width */
}

.will-matters-tagline {
    color: #eab308; /* Theme gold accent */
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 12px;
}

.will-matters-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    line-height: 1.25;
}

.will-matters-title .highlight-blue {
    color: #1e62d0;
}

.will-matters-title strong {
    font-weight: 700;
    color: #111111;
}

/* Bullet Points Lists Styling */
.will-matters-list {
    list-style: none; /* Removes browser default bullets */
    padding: 0;
    margin: 0;
}

.will-matters-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 14px;
    color: #333333;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Custom bullet styling for clean crisp render */
.will-matters-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -2px;
    color: #111111;
    font-size: 1.2rem;
}

/* --- Responsive Media Queries --- */

/* Tablet & Smaller Desktop Views */
@media (max-width: 992px) {
    .will-matters-container {
        gap: 40px;
    }
    .will-matters-title {
        font-size: 2.1rem;
    }
    .will-matters-list li {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
}

/* Mobile Screens (Vertical Stack Layout) */
@media (max-width: 768px) {
    .will-matters-section {
        padding: 40px 15px;
    }
    .will-matters-container {
        flex-direction: column-reverse; /* Flips order so text header/content reads first on mobile if preferred, or use column to keep image on top */
        gap: 35px;
    }
    .will-matters-image-col,
    .will-matters-content-col {
        width: 100%;
    }
    .will-matters-title {
        font-size: 1.85rem;
        margin-bottom: 20px;
    }
    .will-matters-img-wrapper {
        max-width: 100%;
        height: auto;
    }
}


/* ************************************************** wasiat page   WHY IT MATTERS end **************************************************************************************/



/* ************************************************** wasiat page   Consultant form start **************************************************************************************/




/* --- Consultation Form Section Scoped Styles --- */
.consult-form-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.consult-form-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* --- Left Column: Text & Pricing Info --- */
.consult-form-info-col {
    flex: 1;
    max-width: 450px;
}

.consult-form-tagline {
    color: #eab308; /* Branding golden yellow text color */
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 15px;
}

.consult-form-heading {
    font-size: 24px;
    font-weight: 500;
    color: #222222;
    line-height: 1.3;
    margin-bottom: 10px;
}

.consult-form-price {
    font-size: 60px;
    font-weight: 700;
    color: #1e62d0; /* Soft bright branding blue color */
    line-height: 1;
    /* Clean text shadow mirroring the crisp depth styling inside image_e68503.png */
    text-shadow: 0px 4px 10px rgba(30, 98, 208, 0.2);
}

/* --- Right Column: The Form Box Architecture --- */
.consult-form-card-wrapper {
    flex: 1.2;
    max-width: 580px;
    width: 100%;
    position: relative;
    /* Using pseudoelement layering to perfectly replicate that solid offset blue container accent */
    background: #4f8bf0;
    border-radius: 12px;
    padding-left: 6px;
    padding-top: 6px;
}

.consult-form-card {
    background-color: #f5f5f5; /* Light subtle grey panel container fill */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    top: -6px;
    left: -6px;
}

.consult-form-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 30px;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* --- Form Layout Controls --- */
.consult-actual-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    width: 100%;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #444444;
}

/* Form Inputs UI Element Controls */
.form-group input,
.form-group select {
    width: 100%;
    height: 42px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 0.95rem;
    color: #222222;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #1e62d0;
}

/* Custom Dropdown Arrow Element Styling styling */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-30%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #b5b5b5; /* Elegant down triangle */
    pointer-events: none;
}

.select-wrapper select {
    appearance: none; /* Strip native OS styling indicators out */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 35px;
}

/* Form Submit CTA Action Button Styling */
.form-submit-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
}

.consult-form-submit-btn {
    background-color: #1e62d0;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 8px;
    padding: 12px 36px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.consult-form-submit-btn:hover {
    background-color: #1452b8;
}

.consult-form-submit-btn:active {
    transform: scale(0.98);
}

/* --- Responsive Media Queries --- */

@media (max-width: 992px) {
    .consult-form-container {
        gap: 30px;
    }
    .consult-form-heading {
        font-size: 1.8rem;
    }
    .consult-form-price {
        font-size: 3.8rem;
    }
    .consult-form-card {
        padding: 30px 24px;
    }
}

/* Mobile Screens Breakdown layout stack handling */
@media (max-width: 768px) {
    .consult-form-section {
        padding: 40px 15px;
    }
    .consult-form-container {
        flex-direction: column; /* Switches from horizontal split to vertical column structure */
        gap: 40px;
        text-align: center;
    }
    .consult-form-info-col {
        max-width: 100%;
    }
    .form-submit-wrapper {
        justify-content: center; /* Centers form submit button on smartphones to follow layout visual weight standards */
    }
    .form-row {
        flex-direction: column; /* Inputs drop stack under each other cleanly inside cramped viewpoints */
        gap: 20px;
    }
}

/* ************************************************** wasiat page   Consultant form end **************************************************************************************/


/* ************************************************** wasiat page   site   start **************************************************************************************/



/* --- Site Branding Section Scoped Styles --- */
.site-brand-section {
    padding: 30px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif; /* Clean sans-serif structure matching your branding font */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.site-brand-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- Main Brand Logo Styles --- */
.site-brand-logo {
    font-size: 2.4rem;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 8px;
}

.site-brand-logo .logo-bold {
    font-weight: 800;
    color: #0c1e3b; /* Deep premium midnight navy blue */
}

.site-brand-logo .logo-light {
    font-weight: 300;
    color: #b5945b; /* Elegant gold accent hue */
}

/* --- Tagline & Horizontal Accents Grid --- */
.site-brand-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.site-brand-tagline .tagline-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0c1e3b;
    letter-spacing: 4px; /* Expanded letterspacing to perfectly replicate layout footprint */
    text-indent: 4px; /* Adjusts alignment offset caused by letter-spacing edge padding */
    white-space: nowrap;
}

.site-brand-tagline .dot {
    color: #b5945b; /* Golden separating bullet dots */
    margin: 0 2px;
    font-size: 0.85rem;
}

/* Elegant thin bounding layout rules lines on the left/right edges */
.site-brand-tagline .tagline-line {
    width: 40px;
    height: 1px;
    background-color: #c9b38c; /* Lighter soft gold container line rule */
    display: inline-block;
}

/* --- Responsive Layout Rules --- */

@media (max-width: 480px) {
    .site-brand-logo {
        font-size: 1.85rem; /* Downscales clean on cramped smartphone viewports */
        margin-bottom: 6px;
    }
    
    .site-brand-tagline .tagline-text {
        font-size: 0.62rem;
        letter-spacing: 2px;
        text-indent: 2px;
    }
    
    .site-brand-tagline .tagline-line {
        width: 20px; /* Shortens lines symmetrically to fit thin viewport windows */
    }
}
/* ************************************************** wasiat page   site   end **************************************************************************************/

/* ************************************************** Hibah Gift Page Start **************************************************************************************/

/* --- Core Module Wrapper --- */
.hibah-module-wrapper {
    width: 100%;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.hibah-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* Common Section Titles styling */
.hibah-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 50px;
}

.hibah-section-title .highlight-blue {
    color: #1e62d0;
}

/* --- SECTION 1: Why Hibah Card Grid Layout --- */
.hibah-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hibah-benefit-card {
    background-color: #ffffff;
    border: 1px solid #dbeafe; /* Soft blue boundary border layout */
    border-radius: 12px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 4px 15px rgba(30, 98, 208, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hibah-benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 98, 208, 0.06);
}

.hibah-benefit-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hibah-benefit-icon svg {
    width: 70px;
    height: 70px;
}

.hibah-benefit-content {
    flex: 1;
}

.hibah-benefit-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 10px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hibah-benefit-content p {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.6;
}

/* Alignment rules strictly mirroring image_c3c9c0.png */
.hibah-benefit-content.align-left { text-align: left; }
.hibah-benefit-content.align-right { text-align: left; }

/* --- SECTION 2: Hibah Process Timeline Architectural Layout --- */
.hibah-timeline-container {
    position: relative;
    margin-top: 60px;
    padding-top: 40px;
}

/* Horizontal Line tracking axis across steps */
.hibah-timeline-line {
    position: absolute;
    top: 66px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1e62d0;
    z-index: 1;
}

.hibah-timeline-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 20px;
}

.hibah-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hibah-step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    height: 65px;
    justify-content: flex-end;
}

.hibah-step-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e62d0;
    margin-bottom: 12px;
}

.hibah-step-number {
    width: 32px;
    height: 32px;
    background-color: #0c1e3b; /* Dark Navy Accent Badge */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #1e62d0;
}

/* Timeline Cards Blueprint Styles */
.hibah-step-card {
    background-color: #e6f0ff; /* Light layout sky blue filler */
    border: 1px solid #b3d1ff;
    border-radius: 12px;
    padding: 25px 20px;
    width: 100%;
    min-height: 220px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    box-sizing: border-box;
}

.hibah-step-card p,
.hibah-step-card li {
    font-size: 0.88rem;
    color: #222222;
    line-height: 1.6;
}

.hibah-step-card ul {
    padding-left: 15px;
    margin: 0;
}

.hibah-step-card li {
    margin-bottom: 10px;
}

.hibah-step-card li:last-child {
    margin-bottom: 0;
}

/* --- Responsive Media Queries --- */

/* Intermediate Tablet Breaks */
@media (max-width: 992px) {
    .hibah-timeline-steps {
        gap: 15px;
    }
    .hibah-step-card {
        padding: 20px 15px;
        min-height: 260px;

    }
    .hibah-step-name {
        font-size: 1rem;
    }
}

/* Universal Mobile Adaptations */
@media (max-width: 768px) {
    .hibah-container {
        padding: 40px 15px;
    }
    .hibah-section-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    /* Benefits Cards switch layout stack */
    .hibah-benefit-card, 
    .hibah-benefit-card.reverse {
        flex-direction: column;
        text-align: center !important;
        gap: 20px;
        padding: 30px 20px;
    }
    .hibah-benefit-content.align-left,
    .hibah-benefit-content.align-right {
        text-align: center;
    }

    /* Process Flow layout flips horizontally into vertical checklist timeline track */
    .hibah-timeline-line {
        top: 0;
        left: 36px;
        width: 2px;
        height: 100%;
    }
    .hibah-timeline-steps {
        flex-direction: column;
        gap: 30px;
    }
    .hibah-step-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
    }
    .hibah-step-header {
        flex-direction: column-reverse;
        height: auto;
        justify-content: center;
        margin-bottom: 0;
        width: 55px;
        flex-shrink: 0;
    }
    .hibah-step-name {
        display: none; /* Hide top text since layout reads into the card block directly */
    }
    .hibah-step-card {
        min-height: auto;
    }
}



/* --- Hibah Process Section Variables & Core --- */
.hp-section {
    padding: 80px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', -apple-system, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.hp-container {
    max-width: 1140px;
    margin: 0 auto;
}

/* Section Title matching image text formatting */
.hp-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin-bottom: 70px;
    letter-spacing: -0.5px;
}

.hp-main-title .highlight-blue {
    color: #1e62d0;
}

/* --- Timeline Desktop Architecture --- */
.hp-timeline-wrapper {
    position: relative;
    padding-top: 20px;
}

/* Exact matching axis line going behind node circles */
.hp-timeline-axis {
    position: absolute;
    top: 76px; /* Sits directly in center of the 36px node badge */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #4f8bf0;
    z-index: 1;
}

.hp-timeline-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 25px;
}

.hp-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Step Header Group (Title + Node Circle) */
.hp-step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    height: 75px;
    justify-content: flex-end;
}

.hp-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: -0.2px;
}

/* Alternating Title Colors from Image */
.hp-step-title.color-blue { color: #4f8bf0; }
.hp-step-title.color-navy { color: #1e3a8a; }

/* Perfect circle step node */
.hp-step-number {
    width: 36px;
    height: 36px;
    background-color: #0E2477; /* Dark navy inside fill */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 600;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #4f8bf0; /* Double border ring effect */
}

/* --- The Process Blue Card Elements --- */
.hp-step-card {
    background-color: #e6f0ff; /* Soft sky blue box tint */
    border: 1px solid #cce0ff;
    border-radius: 14px;
    padding: 30px 22px;
    width: 100%;
    min-height: 250px; /* Forces equal heights on desktop */
    box-sizing: border-box;
    /* Soft premium drop shadow layer mimicking image depth */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.09); 
    display: flex;
    flex-direction: column;
}

/* Center option used specifically for Card 3 Text alignment */
.hp-step-card.content-center {
   /* justify-content: center;*/
}

.hp-step-card.content-center .hp-card-text {
    text-align: center;
}

/* Card Content List & Text Elements */
.hp-card-list {
    padding-left: 14px;
    margin: 0;
}

.hp-card-list li {
    font-size: 0.9rem;
    color: #222222;
    line-height: 1.6;
    margin-bottom: 15px;
}

.hp-card-list li:last-child {
    margin-bottom: 0;
}

.hp-card-text {
    font-size: 0.9rem;
    color: #222222;
    line-height: 1.65;
    margin: 0;
}

/* --- Responsive Layout Adjustments --- */

/* Tablet & Smaller Desktops */
@media (max-width: 992px) {
    .hp-timeline-steps {
        gap: 15px;
    }
    .hp-step-card {
        padding: 24px 16px;
        min-height: 290px;
    }
    .hp-step-title {
        font-size: 1rem;
    }
}

/* Mobile Viewports (Dynamic Flip to Vertical Flow) */
@media (max-width: 768px) {
    .hp-section {
        padding: 50px 15px;
    }
    
    .hp-main-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    /* Flips the background tracker line to go vertically instead of horizontally */
    .hp-timeline-axis {
        top: 0;
        left: 18px;
        width: 2px;
        height: 100%;
    }

    .hp-timeline-steps {
        flex-direction: column;
        gap: 35px;
    }

    .hp-step-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
    }

    /* Restructures header node on mobile so card sits alongside node counter */
    .hp-step-header {
        flex-direction: column;
        height: auto;
        justify-content: flex-start;
        margin-bottom: 0;
        width: 36px;
        flex-shrink: 0;
    }

    /* Mobile Text layout fallback logic */
    .hp-step-title {
        display: block;
        white-space: nowrap;
        position: absolute;
        left: 56px;
        transform: translateY(-28px); /* Shifts step name cleanly above card box container */
        margin-bottom: 0;
    }

    .hp-step-card {
        min-height: auto; /* Dissolves unneeded white space layout on responsive viewports */
        padding: 22px 20px;
    }
    
    .hp-step-card.content-center .hp-card-text {
        text-align: left; /* Restores standard reading line tracking on smartphone touch screens */
    }
}

/* ************************************************** Hibah Gift Page End **************************************************************************************/

/* ************************************************** Estate Admin Page Start **************************************************************************************/




/* --- Estate Administration Section Scoped Styles --- */
.ea-intro-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', -apple-system, sans-serif;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ea-intro-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Vertically centers content columns */
    justify-content: space-between;
    gap: 55px;
}

/* --- Left Column Elements --- */
.ea-intro-content-col {
    flex: 1.2; /* Takes slightly more horizontal space for a comfortable reading measure */
}

.ea-intro-tagline {
    color: #eab308; /* Premium golden yellow accent */
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    display: inline-block;
    margin-bottom: 12px;
}

.ea-intro-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    line-height: 1.25;
}

.ea-intro-title .highlight-blue {
    color: #1e62d0; /* Signature theme blue accent color */
}

/* Paragraph Text Blocks styling */
.ea-intro-body {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Precise spacing matching the layout gap between paragraphs */
}

.ea-intro-body p {
    color: #222222;
    font-size: 1.02rem;
    line-height: 1.6;
    text-align: justify; /* Mirrors the clean aligned block margins in image_c186cf.jpg */
    margin: 0;
}

/* --- Right Column Image Elements --- */
.ea-intro-image-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ea-intro-img-wrapper {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
}

.ea-intro-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px; /* Replicates the exact smooth rounded container corner radii */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Soft natural image boundary blend shadow */
}

/* --- Responsive Media Queries --- */

/* Intermediate Tablet & Landscape Views */
@media (max-width: 992px) {
    .ea-intro-container {
        gap: 35px;
    }
    .ea-intro-title {
        font-size: 2.2rem;
    }
    .ea-intro-body p {
        font-size: 0.98rem;
    }
}

/* Mobile Screens (Flips cleanly into single vertical stacked column) */
@media (max-width: 768px) {
    .ea-intro-section {
        padding: 45px 15px;
    }
    .ea-intro-container {
        flex-direction: column; /* Collapses horizontal flex row to vertical grid columns */
        gap: 35px;
    }
    .ea-intro-content-col,
    .ea-intro-image-col {
        width: 100%;
    }
    .ea-intro-title {
        font-size: 1.95rem;
        margin-bottom: 20px;
    }
    .ea-intro-body p {
        text-align: left; /* Better readability rendering over mobile layouts */
    }
    .ea-intro-img-wrapper {
        max-width: 100%;
        height: auto;
    }
}
 
/* ************************************************** Estate Admin Page End **************************************************************************************/

/* ************************************************** Estate Admin Take care Page Start**************************************************************************************/

/* --- Taking Care Section Scoped Styles --- */
.care-leave-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', -apple-system, sans-serif;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.care-leave-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Vertically centers the image and content columns */
    justify-content: space-between;
    gap: 60px;
}

/* --- Left Column Image Elements --- */
.care-leave-image-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.care-leave-img-wrapper {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
}

.care-leave-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px; /* Matches the clean rounded container aesthetics in image_c18025.jpg */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* --- Right Column Content Elements --- */
.care-leave-content-col {
    flex: 1.2; /* Gives paragraphs comfortable horizontal breathing room */
}

.care-leave-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    line-height: 1.25;
}

.care-leave-title .highlight-blue {
    color: #1e62d0; /* Precision matching signature blue accent */
}

/* Body Copy Stack Layout Controls */
.care-leave-body {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Exact layout gap separating the two paragraphs */
}

.care-leave-body p {
    color: #222222;
    font-size: 1.02rem;
    line-height: 1.6;
    text-align: justify; /* Replicates clean paragraph text edges */
    margin: 0;
}

/* --- Responsive Media Queries --- */

/* Tablets & Small Landscape Breakpoints */
@media (max-width: 992px) {
    .care-leave-container {
        gap: 40px;
    }
    .care-leave-title {
        font-size: 2.1rem;
    }
    .care-leave-body p {
        font-size: 0.98rem;
    }
}

/* Mobile Screens (Collapses down to a fluid single vertical layout column) */
@media (max-width: 768px) {
    .care-leave-section {
        padding: 45px 15px;
    }
    .care-leave-container {
        flex-direction: column; /* Switches column directions cleanly */
        gap: 35px;
    }
    .care-leave-image-col,
    .care-leave-content-col {
        width: 100%;
    }
    .care-leave-title {
        font-size: 1.95rem;
        margin-bottom: 20px;
    }
    .care-leave-body p {
        text-align: left; /* Enhances typography readability on smaller handheld devices */
    }
    .care-leave-img-wrapper {
        max-width: 100%;
        height: auto;
    }
}


/* ************************************************** Estate Admin Take care Page End**************************************************************************************/

/* ************************************************** Estate Admin Why Choose Page Start**************************************************************************************/



/* --- Why Choose Section Scoped Styles --- */
.wce-section {
    padding: 80px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', -apple-system, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.wce-container {
    max-width: 1140px;
    margin: 0 auto;
}

/* Section Title exact match text typography formatting */
.wce-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin-bottom: 65px;
    letter-spacing: -0.5px;
}

.wce-main-title .highlight-blue {
    color: #1e62d0; /* Precision matching signature branding blue accent */
}

/* --- Grid Configuration --- */
.wce-cards-grid {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Individual Card Structural Item Wrapper */
.wce-card-item {
    flex: 1;
    min-width: 240px;
    max-width: 265px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Floating Numeric Indicators Layout matching image_c17086.png */
.wce-card-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e62d0;
    line-height: 1;
    margin-left: 10px;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    /* Soft visual baseline shadow logic mapping the crisp details in image */
    text-shadow: 0px 3px 6px rgba(30, 98, 208, 0.15);
}

/* Clean Rounded Inner Container Card Box */
.wce-card-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Muted gray soft perimeter border layout */
    border-radius: 12px; /* Replicates exact rounded visual profile corners */
    padding: 30px 22px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Clean card micro-interaction lift */
.wce-card-item:hover .wce-card-box {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

/* Card Heading Components Typography */
.wce-card-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #002244; /* Dark corporate navy blue text matching image layout */
    margin-bottom: 14px;
    line-height: 1.3;
}

/* Card Content Body Paragraphs formatting */
.wce-card-text {
    font-size: 0.9rem;
    color: #222222;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive Media Viewport Breaks --- */

/* Medium Scale Tablets & Small Desktop Windows */
@media (max-width: 1024px) {
    .wce-cards-grid {
        justify-content: center;
        gap: 25px;
    }
    .wce-card-item {
        max-width: 45%; /* Transitions directly into a comfortable dual-row 2x2 grid */
        flex: none;
        width: calc(50% - 13px);
    }
}

/* Small Device Tablets & Smart Screen Breakpoints Viewports */
@media (max-width: 640px) {
    .wce-section {
        padding: 50px 15px;
    }
    .wce-main-title {
        font-size: 1.95rem;
        margin-bottom: 45px;
    }
    .wce-cards-grid {
        flex-direction: column; /* Flips horizontally grouped components into a vertical stack layout */
        align-items: center;
        gap: 30px;
    }
    .wce-card-item {
        max-width: 100%;
        width: 100%; /* Fully spans standard smartphone container bounding lines */
    }
    .wce-card-box {
        padding: 25px 20px;
    }
}



/* ************************************************** Estate Admin Why Choose Page End**************************************************************************************/

/* **************************************************   Ready To Get Start**************************************************************************************/



/* --- Ready To Get Started Section Scoped Styles --- */
.rtgs-section {
    padding: 90px 20px;
    background-color: #ffffff;
    font-family: 'Poppins', -apple-system, sans-serif;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rtgs-container {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* --- Header Elements Typography --- */
.rtgs-header {
    margin-bottom: 45px;
}

.rtgs-title {
    font-size: 2.7rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.rtgs-title .highlight-blue {
    color: #1e62d0; /* Precision matching signature theme blue */
}

.rtgs-desc {
    color: #111111;
    font-size: 1.15rem;
    line-height: 1.5;
    max-width: 680px;
    margin: 0 auto;
}

/* --- Buttons Layout & Backing Blur Shadow Atmosphere --- */
.rtgs-buttons-glow-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

/* Replicates the large, soft dark radial background blur layer behind the buttons visible in image_c16ce7.png */
.rtgs-buttons-glow-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -40px;
    right: -40px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(12, 30, 59, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(25px);
    z-index: 1;
    pointer-events: none;
}

.rtgs-buttons-group {
    position: relative;
    z-index: 2; /* Sits sharply on top of background glow effects */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
}

/* Universal Base Button Blueprint Structural Controls */
.rtgs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 275px;
    height: 110px; /* Exact deep block sizing footprint from your design */
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 14px; /* Crisp curved corner profile matches layout */
    box-sizing: border-box;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}

/* Primary Button Element Design (Solid Navy Layer) */
.rtgs-btn-primary {
    background-color: #0f2570; /* Exact dark corporate midnight navy */
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 37, 112, 0.15);
}

.rtgs-btn-primary:hover {
    background-color: #0a1b54;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 37, 112, 0.25);
}

/* Secondary Button Element Design (Golden Marigold Fill Layer) */
.rtgs-btn-secondary {
    background-color: #ffaa05; /* Exact vibrant brand warm amber gold */
    color: #001a4e; /* Deep rich contrast navy text */
    border: 1px solid #001a4e; /* Subtle surrounding dark stroke line accent matching image */
    box-shadow: 0 10px 25px rgba(255, 170, 5, 0.15);
}

.rtgs-btn-secondary:hover {
    background-color: #e59800;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 170, 5, 0.25);
}

/* --- Responsive Media Grid Breakpoints --- */

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

    .rtgs-title {
        font-size: 2.1rem;
        margin-bottom: 16px;
    }

    .rtgs-desc {
        font-size: 1rem;
        padding: 0 10px;
    }

    .rtgs-buttons-glow-wrapper {
        display: block;
        width: 100%;
        max-width: 320px;
    }

    .rtgs-buttons-glow-wrapper::before {
        display: none; /* Strip unneeded asset filter layers over mobile layouts for memory limits */
    }

    .rtgs-buttons-group {
        flex-direction: column; /* Flips inline elements side-by-side to stacked columns */
        gap: 20px;
        width: 100%;
    }

    .rtgs-btn {
        width: 100%; /* Fully extends smoothly to meet mobile boundaries */
        height: 85px; /* Marginally condensed vertical padding stack heights for handheld layout utility accessibility */
        font-size: 1rem;
    }
	
}


/* **************************************************   Ready To Get End**************************************************************************************/

/* **************************************************   International Tour Start**************************************************************************************/




/* Container styling to match the clean, white aesthetic */
.exhibition-block {
    background-color: #ffffff;
    font-family: 'Times New Roman', Times, serif; /* Using a classic serif to match the flyer */
    
   /* display: flex;
    justify-content: center;*/
    align-items: center;
}

.exhibition-container {
   /* max-width: 1000px;
    width: 1000%;*/
    text-align: center;
}

/* Typography & Header styling */
 .exhibition-header h1 {
    font-size: 2.5rem;
    color: #5C462B; /* Deep bronze/brown */
    
    margin: 0;
    font-weight: 700;
	
}

.exhibition-header h2 {
    font-size: 2.3rem;
    color: #bfa17a; /* Light gold/bronze */
     margin: 5px 0;
    font-weight: 400;
}

.exhibition-header h3 {
    font-size: 25px;
    color: #000000;
	letter-spacing:2px;
     margin: 0 0 15px 0;
    font-weight: 100;
}

.divider-ornament {
    color: #bfa17a;
    font-size: 0.8rem;
    letter-spacing: 5px;
   
}

.location-main {
     font-size:20px;
    font-weight: bold;
    color: #000000;
 }

.location-sub {
    font-family: 'Arial', sans-serif;
    font-size: 0.85rem;
    color: #555555;
    letter-spacing: 0.5px;
    margin: 0;
	font-weight:300;
}

/* Skyline & Curved Text Concept Area */
.skyline-section {
    position: relative;
    margin: 40px auto;
    max-width: 700px;
}

.country-arc {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.country-arc span {
    font-family: 'Arial', sans-serif;
    font-size: 0.75rem;
    color: #777777;
    letter-spacing: 1px;
}

.skyline-img {
    width: 80%;
    height: auto;
    display: block;
    
}

/* Logos Grid Layout */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-top: 40px;
}

.logo-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* Keeps them perfectly square */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: transform 0.2s ease;
}

.logo-card:hover {
    transform: translateY(-3px);
}

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

/* Responsive adjustments for mobile/tablets */
@media (max-width: 768px) {
    .exhibition-header h1 { font-size: 1.8rem; }
    .exhibition-header h2 { font-size: 1.6rem; }
    .exhibition-header h3 { font-size: 1.2rem; }
    
    .logo-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet */
    }
}

@media (max-width: 480px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile phone */
    }
}

/* **************************************************   International Tour End**************************************************************************************/



/* **************************************************   Banner Section Hero Start **************************************************************************************/





.hero-container {
    position: relative;
    width: 100%;
     max-width: none;
    /* Let the image determine the banner height */
    min-height: 0;
    height: auto;

    display: flex;
    align-items: center;

    background-image: url('../../img/hero-banner.png');

    /* IMPORTANT: do not zoom/crop */
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;

    overflow: hidden;
    
    /* Same ratio as the client's banner */
    aspect-ratio: 16 / 7.8;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
     
}

.hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    padding: 7% 40px;
}

.hero-tagline {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

.hero-tagline span {
    color: #1e63d3;
}

.hero-title {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 700;
    color: #111;
    margin: 0 0 20px;
}

.hero-title span {
    color: #1e63d3;
}

.hero-description {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.65;
    color: #333;
    margin-bottom: 25px;
}

.hero-buttons .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    background: #1e63d3;
    border: none;
    color: #fff;

    padding: 13px 20px;
    border-radius: 6px;

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.hero-arrow {
    font-size: 20px;
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1400px) {

    .hero-content {
        max-width: 1350px;
        padding-left: 40px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .hero-container {
        aspect-ratio: 16 / 9;
    }

    .hero-content {
        padding: 6% 30px;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-description {
        max-width: 480px;
        font-size: 15px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .hero-container {
        aspect-ratio: auto;

        min-height: 600px;

        /* Keep the complete image visible */
        background-size: auto 100%;
        background-position: center bottom;
    }

   

    .hero-content {
        padding: 55px 25px;
    }

    .hero-tagline {
        font-size: 10px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-description {
        font-size: 14px;
    }
}



 
/* **************************************************   Banner Section Hero End **************************************************************************************/


/* =========================================
   ENTRY POPUP OVERLAY
========================================= */

.entry-popup-overlay {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

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

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

    display: none; /* IMPORTANT */
    align-items: center;
    justify-content: center;

    padding: 20px;

    z-index: 999999;
    overflow: hidden;
}

/* =========================================
   POPUP BOX
========================================= */

.entry-popup {
    position: relative;

    width: min(90vw, 700px);

    max-height: 90vh;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);

    overflow: visible;

    animation: entryPopupShow 0.35s ease;
}


/* Popup image */

.entry-popup-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 12px;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.entry-popup-close {
    position: absolute;

    top: -14px;
    right: -14px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #111;
    color: #fff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    z-index: 1000000;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);

    transition: all 0.2s ease;
}

.entry-popup-close:hover {
    background: #1e63d3;
    transform: scale(1.08);
}


/* =========================================
   ANIMATION
========================================= */

@keyframes entryPopupShow {

    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .entry-popup-overlay {
        padding: 20px;
    }

    .entry-popup {
        width: 92vw;
        max-width: 500px;
    }

    .entry-popup-image {
        max-height: 80vh;
    }

    .entry-popup-close {
        width: 32px;
        height: 32px;

        top: -11px;
        right: -11px;

        font-size: 22px;
    }

}


/* **************************************************   National Recognition & e-ATAP Section  Start **************************************************************************************/






<!-- ========================================================= -->
<!-- START: National Recognition & e-ATAP Section -->
<!-- ========================================================= -->

  /* ============================================================
   RESPONSIVE e-ATAP / NATIONAL RECOGNITION SECTION
   ============================================================ */

.eatap-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

.outerdiv {
     width: 100%;
    margin: 0;
    padding: 18px 20px 40px;
    box-sizing: border-box;
}

/* Main wrapper */
.eatap-wrapper {
    --primary-navy: #0e274c;
    --primary-blue: #0056b3;
    --accent-gold: #c29547;
    --accent-gold-light: #fdf5e8;
    --text-dark: #1b263b;
    --text-muted: #5e6d82;
    --bg-light: #f8fafc;
    --card-bg: #ffffff;
    --border-color: #e5e9f0;

   width: 100%;
    max-width: none;
    margin: 0 auto;

    padding: 0;

    background: #ffffff;
    border-radius: 0;

    display: flex;
    flex-direction: column;
    gap: 18px;

    box-sizing: border-box;

    box-sizing: border-box;
}

.eatap-wrapper *,
.eatap-wrapper *::before,
.eatap-wrapper *::after {
    box-sizing: border-box;
}


/* ============================================================
   TOP AREA
   ============================================================ */

.eatap-top-grid {
     width: 100%;
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(280px, 0.92fr)
        minmax(360px, 1.15fr);

    gap: 24px;

    align-items: stretch;
}


/* Hero */
.eatap-hero-col {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.eatap-badge-wrapper {
   display: flex;
    align-items: center;

    width: 100%;
    gap: 12px;

    margin-bottom: 22px;
}

.eatap-badge-line {
    height: 1px;
    background: #d8b87a;

    flex: 1;
    min-width: 30px;
}

.eatap-badge {
    display: inline-flex;
    align-items: center;

    background: #fdf5e8;
    border-radius: 5px;

    overflow: hidden;
    white-space: nowrap;
}

 .eatap-badge-icon {
    background: #c29547;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 6px 8px;

    font-size: 12px;
}

 .eatap-badge-text {
    color: #7b5919;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .6px;
    text-transform: uppercase;

    padding: 7px 10px;

    white-space: nowrap;
}


/* Main heading */
.eatap-main-title {
    margin: 0;

    font-size: clamp(31px, 2.7vw, 42px);
    line-height: 1.15;
    font-weight: 800;

    color: #020F3E;

    letter-spacing: -0.5px;
}

.eatap-hero-desc {
    margin-top: clamp(12px, 1.5vw, 20px);

    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.6;

    color: #2B354E;
}


/* ============================================================
   BERNAMA CARD
   ============================================================ */

.eatap-news-card {
 
    padding:26px;

    background: #ffffff;
 

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.eatap-featured-label {
    display: block;
     font-size: 15px;
	color:#163999;
	font-weight:bold;
	text-transform:uppercase;
}

.eatap-news-title {
    font-size:20px;
	font-weight:600;
	color:#020935;
    line-height: 1.4;
}

.eatap-news-meta {
    font-size:13px;
	color:#B88231;
	font-weight:bold;
	margin-top:5px;
	margin-bottom:5px;
}

.eatap-news-desc {
    font-size: 13px;
    line-height: 1.6;
	color:#777C8C;
	font-weight:600;
}

.eatap-btn-news {
		width: 100%;
		min-height: 42px;
		margin-top: 20px;
		padding: 9px 18px;
		
		font-size:14px;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		border-radius: 12px;
		background: linear-gradient(180deg, #073589 0%, #0649b8 55%, #053b98 100%);
		color: #ffffff;
		font-weight: 500;
		letter-spacing: -0.2px;
}
 
 .eatap-btn-news:hover,
.eatap-btn-news:focus,
.eatap-btn-news:active {
  color: #ffffff;
  background: linear-gradient(180deg, #093988 0%, #074bb8 55%, #053b95 100%);
  text-decoration: none;
  outline: none;
}

/* ============================================================
   SPEAKER IMAGE
   ============================================================ */

.eatap-speaker-card {
   
    min-height: 0;
    overflow: hidden;
    display: flex;
   
}


 

/*
 Your HTML image doesn't have class="eatap-speaker-img",
 so target the IMG directly.
*/
 


/* ============================================================
   MIDDLE e-ATAP BOX
   ============================================================ */

.eatap-middle-box {
    width: 100%;

    padding: clamp(18px, 2vw, 28px);

    background: #ffffff;

    border: 1px solid var(--border-color);
    border-radius: 16px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.eatap-middle-header {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(260px, auto)
        minmax(0, 1fr);

    gap: clamp(20px, 3vw, 35px);

    align-items: center;

    margin-bottom:15px;
}


/* Logo area */
.eatap-logo-group {
    display: flex;
    align-items: center;

    gap: clamp(12px, 1.5vw, 18px);

    padding-right: clamp(18px, 2vw, 28px);

    border-right: 1px solid #C18923;
}

.eatap-logo-group > img {
    width: clamp(55px, 5vw, 75px);
    height: auto;
    flex-shrink: 0;
}

.eatap-title-text {
    min-width: 0;
}

.eatap-title-text h2 {
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1;
    white-space: nowrap;
	color:#012071;
	font-weight:bold;
}

.eatap-title-text p {
    font-size:  15px;
    line-height: 1.7;
	color:#030B68;
	font-weight: 600;
	
}


/* Description side */
.eatap-middle-info {
    min-width: 0;
}

.eatap-middle-info h3 {
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.45;
text-transform: uppercase;
    overflow-wrap: break-word;
	font-weight: bold;
	color:#050A32;
}

.eatap-middle-info p {
    font-size: 15px;
    line-height: 1.6;
	
	
}


/* ============================================================
   FEATURES
   ============================================================ */

.eatap-features-list {
    width: 100%;

    display: grid;

    /* Equal responsive columns */
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 0;
  
}

.eatap-feature-item {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 3px clamp(6px, 1vw, 15px);

    font-size: clamp(10px, 0.8vw, 12px);

    color: #09246C;
    font-weight: 600;

    text-align: center;

    position: relative;
}

.eatap-feature-item img {
    
    height: auto;
    flex-shrink: 0;
}

.eatap-feature-item span {
    white-space: nowrap;
}


/* divider */
.eatap-feature-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 1px;
    height: 18px;

    background: #C18923;
}


/* ============================================================
   PARTNER HEADER
   ============================================================ */

.eatap-partners-section {
    width: 100%;
    text-align: center;
	background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.eatap-partners-header {
    width: 100%;
	margin-top:14px;
    display: flex;
    align-items: center;
    justify-content: center;
     gap: clamp(8px, 1.5vw, 16px);
 
}

.eatap-partners-header .eatap-line {
    flex: 1 1 120px;

    max-width: 150px;
    min-width: 20px;

    height: 1px;

    background: #dfd4b5;

    position: relative;
}


.eatap-line-last{
	
	flex: 1 1 120px;
    max-width: 150px;
    min-width: 20px;
    height: 1px;
    background: #dfd4b5;
    position: relative;
}

.eatap-line-last::after {
 	   content: '';
      position: absolute;
      right: 0;
      width: 5px;
      height: 5px;
      background-color: #d1b88a;
      border-radius: 50%;
      transform: translateX(50%);
	  top:-2px;
}

.eatap-line::before {
      content: '';
      position: absolute;
	  top:-2px;
      left: 0;
      width: 5px;
      height: 5px;
      background-color: #d1b88a;
      border-radius: 50%;
      transform: translateX(-50%);
    }

.eatap-partners-header h4 {
    flex: 0 1 auto;

    margin: 0;

    font-size: clamp(9px, 0.9vw, 12px);

    font-weight: 800;

    color: #0d47a1;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    /* allow wrapping instead of breaking the screen */
    white-space: normal;
}


/* ============================================================
   PARTNER GRID
   ============================================================ */

.eatap-partners-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0;
}

.eatap-partner-card {
    width: 100%;
    min-width: 0;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 14px clamp(10px, 2vw, 25px);

    box-shadow: none;
}

.eatap-partner-logo-box {
    width: 100%;
    min-height: 85px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 8px;
}

/*
 IMPORTANT:
 Overrides width="130", width="200", etc.
 This prevents logos becoming too large/small when zooming.
*/
.eatap-partner-logo-box img {
    display: block;

    width: auto !important;
    height: auto;

    max-width: 85%;
    max-height: 80px;

    object-fit: contain;
}

.eatap-outline-box .eatap-partner-logo-box img {
    max-width: 95%;
}

.natrec-partner-label {
    display: block;

    margin-top: 5px;

    font-size: clamp(12px, 1vw, 15px);

    line-height: 1.4;

    text-align: center;
}


/* Partner vertical divider */
.eatap-partner-card:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 1px;
    height: 75px;

    background: #D4A969;
}


/* ============================================================
   LAPTOP / SMALL DESKTOP
   ============================================================ */

@media (max-width: 1200px) {

    .outerdiv {
        padding: 30px;
    }

    .eatap-top-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 0.95fr)
            minmax(300px, 1.15fr);

        gap: 18px;
    }

    .eatap-main-title {
        font-size: clamp(28px, 3vw, 38px);
    }

    .eatap-features-list {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 18px;
    }

    .eatap-feature-item:nth-child(3)::after {
        display: none;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991px) {

    .outerdiv {
        padding: 25px 20px;
    }

    .eatap-wrapper {
        padding: 20px;
    }

    .eatap-top-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eatap-speaker-card {
        grid-column: 1 / -1;
        min-height: 380px;
    }

    .eatap-middle-header {
        grid-template-columns: 1fr;
    }

    .eatap-logo-group {
        border-right: 0;
        border-bottom: 1px solid #C18923;

        padding-right: 0;
        padding-bottom: 18px;
    }

    .eatap-features-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .eatap-partners-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .eatap-partner-card::after {
        display: none;
    }

    .eatap-partner-card:nth-child(odd)::after {
        content: "";

        display: block;

        position: absolute;

        right: 0;
        top: 50%;

        transform: translateY(-50%);

        height: 70px;
        width: 1px;

        background: #D4A969;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .outerdiv {
        padding: 15px;
    }
    
    .eatap-partners-header{
        
        padding:6px;
    }

    .eatap-wrapper {
        padding: 14px;
        gap: 18px;
        border-radius: 12px;
    }

    .eatap-top-grid {
        grid-template-columns: 1fr;
    }

    .eatap-speaker-card {
        grid-column: auto;
        min-height: 280px;
        aspect-ratio: 16 / 10;
    }

    .eatap-main-title {
        font-size: clamp(27px, 8vw, 36px);
    }

    .eatap-badge-wrapper {
        margin-bottom: 16px;
    }

    .eatap-news-card {
        padding: 18px;
    }

    .eatap-middle-box {
        padding: 18px;
    }

    .eatap-logo-group {
        align-items: center;
    }

    .eatap-title-text h2 {
        font-size: 32px;
    }

    .eatap-middle-info p br {
        display: none;
    }

    .eatap-features-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 0;
    }

    .eatap-feature-item {
        justify-content: flex-start;
        text-align: left;

        padding: 5px 10px;
    }

    .eatap-feature-item span {
        white-space: normal;
    }

    .eatap-feature-item::after {
        display: none !important;
    }

    .eatap-partners-header {
        gap: 8px;
    }

    .eatap-partners-header .eatap-line {
        min-width: 15px;
    }

    .eatap-partners-header h4 {
        max-width: 250px;
        line-height: 1.4;
    }

    .eatap-partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eatap-partner-card {
        padding: 12px 8px;
    }

    .eatap-partner-logo-box {
        min-height: 75px;
    }

    .eatap-partner-logo-box img {
        max-width: 80%;
        max-height: 65px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .outerdiv {
        padding: 10px;
    }

    .eatap-wrapper {
        padding: 12px;
    }

    .eatap-badge-line {
        display: none;
    }

    .eatap-badge-wrapper {
        justify-content: flex-start;
    }

    .eatap-main-title {
        font-size: 28px;
    }

    .eatap-speaker-card {
        min-height: 220px;
    }

    .eatap-logo-group {
        gap: 10px;
    }

    .eatap-logo-group > img {
        width: 52px;
    }

    .eatap-title-text h2 {
        font-size: 28px;
    }

    .eatap-title-text p {
        font-size: 11px;
    }

    .eatap-features-list {
        grid-template-columns: 1fr;
    }

    .eatap-partners-grid {
        grid-template-columns: 1fr;
    }

    .eatap-partner-card:nth-child(odd)::after,
    .eatap-partner-card::after {
        display: none !important;
    }

    .eatap-partner-logo-box {
        min-height: 70px;
    }

    .eatap-partner-logo-box img {
        max-width: 220px;
        max-height: 70px;
    }
}



.tapered-gold-line {
         width: 55px;
    height: 3px;
      
      /* Vertical metallic gold gradient */
      background: linear-gradient(
        180deg,
        #f5d78a 0%,
        #e2b357 25%,
        #b88229 55%,
        #8a5e18 100%
      );
      
      /* Tapers the right edge to a fine needle point */
      clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%);
      
      /* Smooth fade towards the right tip */
      -webkit-mask-image: linear-gradient(to right, #000 65%, transparent 100%);
      mask-image: linear-gradient(to right, #000 65%, transparent 100%);
	  margin-bottom:10px;
	   margin-top:5px;
    }
	
	
	
	
	
	
	
	/* ribbon */
	
	
	
	.recognition-wrapper {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    /* Left and Right Decorative Lines */
    .decor-line {
      display: flex;
      align-items: center;
      width: 70px;
    }

    .decor-line::before {
      content: "";
      height: 1.5px;
      flex-grow: 1;
      background-color: #d1a85b;
    }

    .decor-line::after {
      content: "";
      width: 5px;
      height: 5px;
      background-color: #d1a85b;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Invert dot order for right-side line */
    .decor-line.right {
      flex-direction: row-reverse;
    }

    /* Banner Container */
    .banner-container {
      position: relative;
      display: flex;
      align-items: center;
	  gap: 14px;
    }

    /* Gold Pennant / Ribbon on the Left */
    .ribbon-flag {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 64px;
      background: linear-gradient(135deg, #fbe3a9 0%, #e1b45f 50%, #b37e24 100%);
      clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 8px;
      box-sizing: border-box;
      z-index: 2;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    }

    .ribbon-flag svg {
      width: 28px;
      height: 28px;
      stroke: #412404;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Text Pill / Box */
    .banner-text {
      margin-left: 57px;
    background: linear-gradient(180deg, #edd08e 0%, #dfb15e 100%);
    color: #412404;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 8px 21px 6px 13px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
    }
	
	
	
	
	
	
	
	
	
	
/* **************************************************   National Recognition & e-ATAP Section  End **************************************************************************************/



	
/* **************************************************   ESTATE BRIDGE ESG COMPONENT  start **************************************************************************************/


/* =========================================================
   ESTATE BRIDGE ESG COMPONENT (SCOPED STYLES) START
========================================================= */
.eb-wrapper {
  --eb-navy: #0b2240;
  --eb-blue: #1868db;
  --eb-green: #2e7d32;
  --eb-text-main: #1a2530;
  --eb-text-muted: #475569;
  --eb-border: #e2e8f0;

  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--eb-text-main);
  background: #ffffff;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 34, 64, 0.08);
  box-sizing: border-box;
}

.eb-wrapper *,
.eb-wrapper *::before,
.eb-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Hero Section --- */
.eb-hero {
 display: grid;
  grid-template-columns: 1fr 1.2fr; /* Changed from 1.15fr 0.85fr to pull the image left */
  position: relative;
  background: #ffffff;
  min-height: 380px;
}

.eb-hero-content {
  padding: 48px 32px 36px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}

.eb-brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.eb-brand-logo svg {
  width: 44px;
  height: 44px;
  color: var(--eb-navy);
  flex-shrink: 0;
}

.eb-brand-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1.1;
  color:#002A61;
}

.eb-brand-subtitle {
  font-size:12px;
  letter-spacing: 3px;
  color: #002A61;
  font-weight:800;
  margin-top: 3px;
}

.eb-hero-title {
  font-size: 38px;
  line-height: 1.12;
  font-weight: 800;
  color:#0B2653;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.eb-highlight-blue {
  color: #0C58C8;
  display: block;
}

.eb-divider {
  width: 32px;
  height: 4px;
  background-color: #0867C3;
  border-radius: 2px;
  margin-bottom: 16px;
}

.eb-hero-desc {
  font-size: 15px;
  color: #000000;
  max-width: 540px;
  margin-bottom: 32px;
  font-weight:400;
  line-height: 1.6;
}
.colorch{
	color: #0867C3;
}

.eb-hero-desc strong {
  color: var(--eb-blue);
  font-weight: 600;
}

/* Action Pillars */
.eb-pillars {
  display: flex;
  gap: 32px;
  align-items: center;
}

.eb-pillar-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eb-pillar-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #02132F;
}

.eb-pillar-text h4 {
  font-size: 13px;
  font-weight: 800;
  color: #02132F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.eb-pillar-text p {
  font-size: 12px;
  color:#0C1540;
  font-weight:600;
}

/* Visual Right Column */
.eb-hero-visual {
  position: relative;
  background: linear-gradient(135deg, #dce9f8 0%, #b8d4f6 100%);
  background-image: url('../../img/energybg.png');
  background-size: cover;
  background-position: center bottom;
  overflow: hidden;
}

.eb-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.1) 15%, transparent 60%);
    
}

.eb-hero-visual::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: var(--eb-navy);
  transform: rotate(45deg);
}

/* --- ESG Section --- */
.eb-esg-section {
  background-color: #f6f9fc;
  border-top: 1px solid #edf2f7;
 /*padding: 36px 40px 48px 40px;*/
  position: relative;
}

.eb-section-header {
  text-align: center;
  
}

.eb-section-pretitle {
  font-size:17px;
  font-weight: 700;
  letter-spacing:1px;
  color: #0A0C49;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.eb-section-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.eb-text-green { color: #669A1E; }
.eb-text-blue { color: #0260A6; }
.eb-text-navy { color: #002549; }

/* ESG Cards */
.eb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.eb-card {
  background: #F7F8FD;
    display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
   min-height:341px;
   border-right: 1px solid #E9ECF1;
}

.eb-card-body {
  padding: 32px 28px 0px 28px;
  position: relative;
  z-index: 2;
}

.eb-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom:5px;
}

.eb-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.eb-badge.bg-green { background: var(--eb-green); }
.eb-badge.bg-blue { background: var(--eb-blue); }
.eb-badge.bg-navy { background: var(--eb-navy); }

.eb-badge svg {
  width: 24px;
  height: 24px;
}

.eb-card-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
	border-bottom: 1px solid #669A1E;
	width: 9%;
}

.eb-card-social {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
	border-bottom: 1px solid #0267D3;
	width: 9%;
}

.eb-card-subtitle {
  font-size: 14px;
  
  
  margin-bottom: 20px;
  line-height: 1.45;
  margin-left: 57px;
}

.eb-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eb-card-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--eb-text-muted);
  line-height: 1.5;
}

.eb-card-list li::before {
  content: ".";
  position: absolute;
  left: 0;
  top:-13px;
  font-size: 25px;
  font-weight: bold;
}

.eb-card-list.green-bullets li::before { color:  #4E7A1B; }
.eb-card-list.blue-bullets li::before { color: #004DE8; }
.eb-card-list.navy-bullets li::before { color: #002462; }

.eb-card-illustration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 94px;
  z-index: 1;
  pointer-events: none;
}

/* --- Responsive Media Queries --- */
@media (max-width: 992px) {
  .eb-hero {
    grid-template-columns: 1fr;
  }
  .eb-hero-visual {
    min-height: 240px;
  }
  .eb-grid {
    grid-template-columns: 1fr;
  }
  .eb-card {
    min-height: auto;
  }
  .eb-card-body {
    padding-bottom: 110px;
  }
}

@media (max-width: 600px) {
  .eb-hero-content {
    padding: 32px 24px;
  }
  .eb-hero-title {
    font-size: 28px;
  }
  .eb-pillars {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .eb-esg-section {
   /* padding: 32px 20px;*/
  }
  .eb-section-title {
    font-size: 20px;
  }
}


 .divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 250px;       /* Adjust overall width */
 
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;           /* Line thickness */
  background-color: #8fa0b5; /* Light grey/blue line color */
}

.divider span {
  padding: 0 5px;        /* Spacing between text and lines */
  
  font-size: 13px;
  font-weight: 800;
  color: #002151;         /* Dark navy color */
  letter-spacing: 4px;    /* Space between letters */
  text-indent: 4px;       /* Balances the trailing letter spacing */
}


 
 
/* =========================================================
   ESTATE BRIDGE ESG COMPONENT (SCOPED STYLES) END
========================================================= */
	
/* **************************************************   ESTATE BRIDGE ESG COMPONENT  End **************************************************************************************/

/* **************************************************   ESTATE BRIDGE ABOUT US  START **************************************************************************************/

 
 /* Layout Container */
.about-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* -------------------
   LEFT PANEL 
   ------------------- */
.left-panel {
  width: 45%;
  background-color: #082B4B;
  border-left: 12px solid #0E74C6;
  padding: 58px 44px;
  display: flex;
  flex-direction: column;
}

.left-content {
  max-width: 500px;
  margin-left: auto;
}

.subheading-left {
  color: #72B5E9;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.main-heading-left {
  color: #FFFFFF;
  font-size:31px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 30px;
}

.divider {
  width: 74px;
  height: 4px;
  background-color: #C59A32;
  margin-bottom: 35px;
  border-radius: 2px;
}

.desc-left {
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 60px;
}

.stats-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat-card {
  background-color: #113D62;
  padding: 20px;
  border-radius: 12px;
}

.stat-title {
  color: #75ACD5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.stat-value {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-desc {
  color: #FFFFFF;
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.5;
}

/* -------------------
   RIGHT PANEL 
   ------------------- */
.right-panel {
  width:auto;
  background-color: #F8FCFD;
  padding: 50px 61px;
  display: flex;
  flex-direction: column;
}

.right-content {
 /* max-width: 900px;*/
  height: 100%;
  display: flex;
  flex-direction: column;
}

.right-header-section {
  margin-bottom: 50px;
}

.subheading-right {
  color: #0284C7;;
  font-size: 15px;
  font-weight:800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.main-heading-right {
  color: #0B324F;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.desc-right {
color: #6B6F7A;
font-size: 17px;
font-weight: 400;
}

/* Grid layout for strengths */
.strengths-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.strength-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding:36px 45px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.card-header h4 {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
}

 .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 14px;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

.pill-blue {
  background-color: #0284C7;
}

.pill-gold {
  background-color: #CA8A04;
}

.strength-card p {
  color: #64748B;
  font-size: 15px;
  line-height: 1.6;
}

/* Footer Section */
.footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.footer-left {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #162B3E;
}

.footer-right {
  font-size: 14px;
  color: #64748B;
}

/* -------------------
   RESPONSIVENESS 
   ------------------- */
@media (max-width: 1280px) {
  .left-panel { padding: 60px 40px; }
  .right-panel { padding: 60px 60px; }
}

@media (max-width: 1024px) {
  .about-container {
    flex-direction: column;
  }
  
  .left-panel {
    width: 100%;
    border-left: 8px solid #1C5A8A;
    padding: 60px 5%;
  }
  
  .left-content {
    max-width: 100%;
    margin: 0;
  }

  .right-panel {
    width: 100%;
    padding: 60px 5%;
  }
}

@media (max-width: 768px) {
  .main-heading-left {
    font-size: 34px;
  }

  .main-heading-right {
    font-size: 28px;
  }

  .strengths-grid {
    grid-template-columns: 1fr;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .left-panel, .right-panel {
    padding: 40px 5%;
  }
  
  .main-heading-left {
    font-size: 28px;
  }
  
  .desc-left br {
    display: none;
  }
}
 
 
 	
/* **************************************************  ESTATE BRIDGE ABOUT US  END **************************************************************************************/