/*
 * General Styles and Containers
 * Assuming a default font (Inter) and basic box-sizing model.
 */
 

/* Main Content Wrapper - Centers content and adds horizontal padding */
.css-vmq4q1 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem; /* Default mobile padding */
}

@media (min-width: 768px) {
    .css-vmq4q1 {
        padding: 0 2.5rem;
    }
}

/* Introduction Section (Work at THREEinEIGHT) */
.css-1smn4s7 {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2.5rem;
}

.css-1smn4s7 h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #172b4d;
    margin-bottom: 1rem; /* mb-4 equivalent */
}

.css-110j70m {
    color: #5e6c84;
    font-size: 1.125rem;
    line-height: 1.75;
}

.css-110j70m span b {
    color: #172b4d;
}

/* Core Values Section */
.css-15v02us {
    padding-top: 3rem;
    padding-bottom: 5rem;
    text-align: center;
}

.css-1prqfbb {
    font-size: 2rem;
    font-weight: 700;
    color: #172b4d;
    margin-bottom: 3rem;
}

/* Values Grid Container */
.css-1lfjgww {
    display: grid;
    gap: 24px;
    /* Mobile: 1 column */
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
    /* Tablet: 2 columns */
    .css-1lfjgww {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    /* Desktop: 4 columns for the 4 values */
    .css-1lfjgww {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Base Individual Value Card (Innovation - Default, light green/blue) */
.css-1xr8u6d {
    padding: 24px;
    background-color: #f7f9fc; /* Default background color */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
    margin-right: 8px !important;  
    margin-left: 8px !important;  

}
 
.css-1xr8u6d:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* --- Specific Card Color Overrides --- */

/* Card 1: Innovation (css-1ez8t2v is inside the first css-1xr8u6d) - Defaulted to light blueish-gray */

/* Card 2: Collaboration (css-1lklz3w is inside the second css-1xr8u6d) */
.css-1lklz3w ~ .css-1lklz3w,
.css-1xr8u6d:nth-child(2) { 
    
    background-color: #fcf7de;
    border-color: #dcdfe4;
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;

}
.css-1xr8u6d:nth-child(2) .css-1w1sbdp {
    background-color: #ffe0c2;
}

/* Card 3: Integrity (css-nij1xg is inside the third css-1xr8u6d) */
.css-nij1xg ~ .css-nij1xg,
.css-1xr8u6d:nth-child(3) {
    background-color: #e5faf0; /* Light Lavender/Blue */
    
    border-color: #dcdfe4;
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
}
.css-1xr8u6d:nth-child(3) .css-1w1sbdp {
    background-color: #d8e0ff;
}

/* Card 4: Efficiency (css-462a3s is inside the fourth css-1xr8u6d) */
.css-462a3s ~ .css-462a3s,
.css-1xr8u6d:nth-child(4) {
       display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #f4f0ff;
    border-color: #dcdfe4;
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
}
.css-1xr8u6d:nth-child(4) .css-1w1sbdp {
    background-color: #c7f2f2;
}

.css-r0fsu7 {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
}
.css-r0fsu7::-webkit-scrollbar {
    display: none; /* hide scrollbar */
}

/* Inner structure for flex alignment */
.css-1ez8t2v, .css-1lklz3w, .css-nij1xg, .css-462a3s {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.css-16y7s86, .css-1s52k3y {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Wrapper - Base Style */
.css-1w1sbdp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #e6f7ea; /* Default Light green background */
    margin-bottom: 12px;
}

.css-1w1sbdp svg {
    width: 28px;
    height: 28px;
}

.css-1a1lctg {
    font-size: 1.25rem;
    font-weight: 700;
    color: #172b4d;
    margin-bottom: 0.5rem;
}

.css-a0av5a {
    color: #5e6c84;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Benefits & Perks Section */.css-1kk8p0k {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.css-1kk8p0k[contenteditable="true"]:empty:before {
    content: attr(placeholder);
    color: #626f86;
    pointer-events: none;
}
.css-1kk8p0k:focus {
    outline: inherit;
}
.css-1kk8p0k:focus-visible {
    outline: inherit;
}

.css-1wq9ezx {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    /* Added styles to make this container a single, unified box */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Responsive Padding for the new box container */
    padding: 2rem 1rem; /* Mobile padding */
}

@media (min-width: 768px) {
    .css-1wq9ezx {
        padding: 3rem 2.5rem; /* Tablet/Desktop padding */
    }
}

.css-csuflz {
    font-size: 1.5rem;
    font-weight: 600;
    color: #172b4d;
    margin-bottom: 2.5rem;
}

/* Benefits Grid Container */
.css-kvjtvf {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(1, 1fr); /* Mobile: 1 column */
    text-align: left;
    margin-bottom: 40px;
}

@media (min-width: 640px) {
    .css-kvjtvf {
        grid-template-columns: repeat(3, 1fr); /* Tablet/Desktop: 3 columns */
    }
}

/* Individual Benefit Card */
.css-17w93pi {
    padding: 20px;
    background-color: #ffffff;
    border-left: 4px solid #DA70D6; /* Primary color accent */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.css-34hkqw {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #DA70D6;
    margin-bottom: 0.5rem;
}

/* CTA Button Styling */
.css-mbkun8 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff !important;
    background-color: #DA70D6; /* Primary brand color */
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 6px 15px rgba(218, 112, 214, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.css-mbkun8:hover {
    background-color: #DA70D6; /* Darker green on hover */
    box-shadow: 0 10px 20px rgba(218, 112, 214, 0.6);
    transform: translateY(-2px);
    color: #000 !important;
}

.css-mbkun8:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(218, 112, 214, 0.4);
}

/* These classes appear to be for presentation/animation effects within the button */
.css-coclz, .css-1ab87kf {
    position: absolute;
    width: 0;
    height: 0;
    display: none;
}

.css-18bih2h {
    margin: 0;
    line-height: 1;
}