/* --- ADMINISTRATIVE --- */
.hidden-title h1.page-title, .hidden-title .field--name-title { display: none !important; }
.gin-secondary-toolbar, .gin-back-to-admin { display: none !important; }
body.gin--secondary-toolbar { padding-top: 0 !important; }

/* --- BRANDING & UTILITY --- */
.bg-royal-blue {
    background-color: #002366 !important;
    color: #ffffff !important;
    padding: 20px 0 60px 0 !important;
}

.path-frontpage .region-content { margin-top: 0 !important; padding-top: 0 !important; }
/* --- SECTION 1: HERO MISSION TEXT (SLIM VERSION) --- */

/* Base: Stacked for Mobile */
.layout-builder__section--hero {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    padding: 20px 5% !important;
}

/* Desktop: Restore Side-by-Side */
@media screen and (min-width: 1025px) {
    .layout-builder__section--hero {
        flex-direction: row !important; /* This fixes the top 2-column layout */
        justify-content: space-between !important;
        padding: 20px 80px !important;
        align-items: center !important;
    }
    
    .layout-builder__section--hero .layout__region--first {
        flex: 0 0 55% !important; /* Text side */
    }
    
    .layout-builder__section--hero .layout__region--second {
        flex: 0 0 40% !important; /* Video/Logo side */
    }
}

.block-inline-blockbasic h2 {
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 500 !important; 
    font-style: italic !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    font-size: 1.0rem !important;
    letter-spacing: 2px !important;
    line-height: 1.0 !important;
    white-space: nowrap !important;
    padding-left: 20px !important;
    margin-bottom: 20px !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}


/* This targets H2s in the service grid, ensuring they stay professional */
.layout--fourcol-section .block-inline-blockbasic h2 {
    color: #002366 !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-size: 1.25rem !important; /* Smaller, sleek size */
    font-weight: 600 !important;   /* Professional semi-bold */
    font-style: normal !important; /* ABSOLUTELY NO ITALICS HERE */
    text-transform: none !important; /* Keep as typed (e.g. Integrated Development) */
    letter-spacing: normal !important;
    padding-left: 0 !important;    /* Reset the hero padding */
    margin-top: 15px !important;
    text-align: center !important;
    white-space: normal !important;
}

/* 2. Force the Logo to stay inside the boundary */
.layout-builder__section--hero img.image-style-large,
.layout-builder__section--hero .field--name-field-company-logo img {
    width: 100% !important;      /* Grows to fill */
    max-width: 480px !important;  /* Stops at your target size */
    height: auto !important;     /* Maintains aspect ratio */
    display: block !important;
    object-fit: contain !important; /* Ensures the whole logo is visible */
}

/* Ensure the logo below the text doesn't get squashed */
.block-inline-blockbasic .field--name-field-company-logo {
    margin-top: 20px !important;
    display: block !important;
}

/* Desktop: Restore 4-Columns */
@media screen and (min-width: 768px) {
    .layout--fourcol-section .layout__region {
        flex: 0 1 calc(25% - 20px) !important; /* This forces the 4-column layout */
    }
}
/* --- SECTION 2: 4-COLUMN GRID --- */
.layout--fourcol-section {
    display: flex;
    flex-direction: row !important; /* Ensures horizontal flow on desktop */ 
    flex-wrap: wrap !important;
    gap: 20px;
    padding: 40px 5% !important;
    justify-content: center !important;
}
.layout--fourcol-section .layout__region {
    flex: 1 1 100%;
    min-width: 250px;
    text-align: center;
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.layout--fourcol-section img {

    width: 100%;             /* Allows it to scale up to the max-width */

    max-width: 260px;        /* Increased from 100px to 160px */

    height: 227px;           /* Increased from 100px to 140px */

    object-fit: contain;     /* Ensures the neon-blue icons don't distort */

    margin: 5px auto 10px;     /* Centers and adds more space before the title */

    display: block;

    transition: transform 0.3s ease; /* Smooth transition for the hover effect */

}

/* The Bespoke Hover Effect for 4 Columns */

.layout--fourcol-section .layout__region:hover {

    border-color: #002366; /* Your Royal Blue */

    transform: translateY(-10px); /* Lifts the card */

    box-shadow: 0 12px 24px rgba(0, 35, 102, 0.15); /* Blue-tinted shadow */

}

/* Desktop: Restore Side-by-Side */
@media screen and (min-width: 1025px) {
    .layout-builder__section--hero {
        flex-direction: row !important; /* This fixes the top 2-column layout */
        justify-content: space-between !important;
        padding: 20px 80px !important;
        align-items: center !important;
    }
    
    .layout-builder__section--hero .layout__region--first {
        flex: 0 0 55% !important; /* Text side */
    }
    
    .layout-builder__section--hero .layout__region--second {
        flex: 0 0 40% !important; /* Video/Logo side */
    }
}


/* Mobile Responsiveness for this specific block */
@media screen and (max-width: 1024px) {
   .layout-builder__section--hero .block-inline-blockbasic h2,
   .layout-builder__section--hero .layout__region--first img {
       padding-left: 0 !important; /* Reset padding for center mobile view */
       margin: 0 auto 20px !important;
       text-align: center !important;
   } 
	
}