/* 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 *******************************************************************************************/

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Figtree', sans-serif;
        }
.hero-container {
    max-width: 1200px;
    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 */
.banner-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;
}

.banner-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 {
    max-width: 1200px;
    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;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    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;
    max-width: 370px;
    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: 1200px;
    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: 1200px;
    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: center;
}

.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 {
    flex: 1.3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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**************************************************************************************/