/* About Us Page Specific Styles */

/* Ensure body has the project fonts if not globally set */
body {
    font-family: 'Geist', sans-serif; /* Default body font */
}

/* Hero Section */
.about-hero-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the container */
    padding: 80px 0; /* Vertical padding, horizontal handled by container */
    background-color: #FFFFFF; /* Assuming white background like other pages */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevent horizontal scroll if content is too wide before media queries kick in */
}

.about-hero-section .container {
    max-width: 1240px; /* As per Figma inner content width */
    width: 100%;
    margin: 0 auto;
    padding: 0 20px; /* Standard horizontal padding for container */
    box-sizing: border-box;
}

.about-hero-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Gap between text and image columns */
    width: 100%;
}

.about-hero-text-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px; /* Gap between h1 and p */
    flex: 1; /* Allow text column to take available space */
    max-width: 715px; 
    padding-top: 20px; /* Added padding to align text better with image that has overlay card */
}

.about-hero-text-column h1 .text-highlight {
    font-weight: 600;
    color: #168CE0;
}

.about-hero-text-column h1 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 58px;
    line-height: 1.25; 
    color: #252525;
    margin: 0;
}

.about-hero-text-column p {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6; 
    color: #252525;
    margin: 0 0 24px 0;
}

.about-hero-image-column {
    width: 505px;
    height: 524px;
    background-color: #E8F3FA;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.about-hero-image-column::before { /* Main image */
    content: "";
    position: absolute;
    width: calc(100% + 96px); 
    height: calc(100% + 1px);
    left: -48px;
    top: -0.5px;
    background: url('../images/aboutus/about-hero-woman-laptop.png') no-repeat center center;
    background-size: cover;
    z-index: 1;
}

.about-hero-image-column::after { /* Blurred texture */
    content: "";
    position: absolute;
    width: calc(100% + 60px);
    height: calc(100% + 23px);
    left: -30px;
    top: 0px;
    background: url('../images/about-hero-blur-texture.png'); 
    background-blend-mode: plus-darker;
    filter: blur(15.55px);
    border-radius: 14px;
    z-index: 0;
    opacity: 0.7; /* Added opacity as per figma notes (opacity: 0.2 for one layer) */
}


.hero-image-overlay-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row; 
    align-items: center; 
    padding: 12px;
    gap: 10px; /* Adjusted gap */
    position: absolute;
    width: 256.6px;
    min-height: 85.22px;
    left: 14px;
    top: 17px;
    background: #FFFFFF;
    border: 1px solid #78A1F4;
    border-radius: 11.3543px;
    z-index: 2;
}

.overlay-card-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.overlay-card-icon {
    width: 16.8px;
    height: 16.8px;
}

.overlay-card-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
}

.overlay-card-subtitle {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12.9764px;
    line-height: 1.2;
    color: #1181D0;
    margin: 0 0 4px 0;
}

.overlay-card-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 21.0866px;
    line-height: 1.1;
    color: #303030;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .about-hero-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .about-hero-text-column {
        max-width: 100%;
        align-items: center;
        text-align: center;
        padding-top: 0; /* Reset padding when stacked */
    }
    
    .about-hero-text-column h1 {
        font-size: 48px;
    }

    .about-hero-text-column p {
        font-size: 18px;
    }

    .about-hero-image-column {
        width: 100%;
        max-width: 505px;
        display: block; /* Ensure it's not hidden */
    }
    
    .hero-image-overlay-card {
        width: calc(100% - 28px);
        max-width: 256.6px;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
        padding: 10px;
    }

    .overlay-card-title {
        font-size: 14px;
    }
}

/* Our Story Section */
.our-story-section {
    padding: 0 0 100px;
    background: #FFFFFF;
}

.our-story-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 27px;
}

.our-story-image-column {
    width: 571px;
    height: 753px;
    flex-shrink: 0;
}

.our-story-image-column img {
    width: 100%;
    height: 60%;
    object-fit: cover;
    border-radius: 14px;
}

.our-story-text-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 32px 24px 32px;
    gap: 36px;
    width: 648px;
    box-sizing: border-box;
}

.story-main-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.our-story-text-column h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    color: #3E3E3E;
    margin: 0;
}

.our-story-text-column p {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #252525;
    margin: 0;
}

.our-story-text-column .story-conclusion {
    font-weight: 600;
    color: #3E3E3E;
}

.signature-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.signature-image {
    width: 71px;
    height: auto;
}

.signature-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signature-name {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    color: #1D3F83 !important;
    margin: 0;
}

.signature-title {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #4F4F4F !important;
    margin: 0;
}

/* Our Core Section */
.our-core-section {
    background: #FFFFFF;
    padding: 50px 0; /* Adjusted from Figma's 0px 100px for section, and 50px 0px for inner frame */
    position: relative; /* For z-indexing and absolute positioning of background */
    overflow: hidden; /* To contain the large decorative background */
}

.our-core-section .container {
    position: relative; /* For z-indexing context */
    z-index: 1; /* Ensure content is above the absolute positioned background */
}

.core-background-image-wrapper {
    position: absolute;
    width: 1110px; /* From Figma */
    height: 1139px; /* From Figma */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%);
    top: -150px; /* Adjusted: Figma's top: 338.5px seems too low if section height is 536px. This needs tweaking. */
    z-index: 0; /* Behind content */
    display: flex;
    justify-content: center;
    align-items: center;
}

.core-background-pattern-img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 100%;
    object-fit: contain;
    border-radius: 551.681px; /* From Figma */
    /* The linear gradient part from Figma is complex to apply directly to an img tag's background.
       If the image itself doesn't have the gradient, a pseudo-element or wrapper div might be needed.
       For now, assuming the image includes the gradient or it's a pattern that works with white fade at top. */
    opacity: 0.3; /* Making it subtle, adjust as needed */
}

.core-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px; /* From Figma: Frame 1984079596 gap */
    text-align: center;
}

.our-core-section .section-header h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 61px;
    color: #252525; /* Monochromes/Neutral Grey/grey-900 */
    margin-bottom: 0; /* Gap is handled by .core-content */
}

.core-items-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start; /* Align items to the top if they have different heights */
    gap: 20px; /* From Figma: Frame 1984079591 gap */
    width: 100%; /* Take full width of container */
    max-width: 1240px; /* Max width for the grid itself */
}

.core-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center icon and text block */
    padding: 8px;
    gap: 16px; /* From Figma: Frame 1984079584 gap */
    width: 400px; /* From Figma */
    text-align: center;
    flex: 1; /* Distribute space if fewer than 3 items, or if container is wider */
    max-width: 400px;
}

.core-item-icon-container {
    width: 52px;
    height: 52px;
    background: #1181D0;
    border: 3.55px solid #BDD2FC; /* Rounded from 3.54545px */
    border-radius: 50%; /* Simplified from 63.8182px for a perfect circle */
    display: flex;
    justify-content: center;
    align-items: center;
}

.core-item-icon-container img {
    width: 24px; /* Adjust as needed for actual icon size */
    height: 24px;
}

.core-item-text h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    color: #010101;
    margin-top: 0;
    margin-bottom: 16px; /* Matches gap in Figma's Frame 1984079583 */
}

.core-item-text p {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #010101;
    margin: 0;
}

/* Responsive adjustments for Our Core section */
@media (max-width: 1024px) {
    .core-items-grid {
        flex-direction: column; /* Stack items on smaller tablets */
        align-items: center;
        gap: 40px;
    }
    .core-item {
        width: 100%;
        max-width: 500px; /* Allow items to be wider when stacked */
    }
    .our-core-section .section-header h2 {
        font-size: 40px;
    }
    .core-item-text h3 {
        font-size: 28px;
    }
    .core-item-text p {
        font-size: 16px;
    }
    .core-background-image-wrapper {
        top: -50px; /* Adjust background position */
    }
}

@media (max-width: 768px) {
    .our-core-section {
        padding: 40px 0;
    }
    .core-content {
        gap: 60px;
    }
    .our-core-section .section-header h2 {
        font-size: 32px;
        line-height: 1.3;
    }
    .core-item-text h3 {
        font-size: 24px;
    }
    .core-item-text p {
        font-size: 15px;
    }
    .core-background-image-wrapper {
        width: 90%;
        top: 0; /* Further adjust background */
    }
}

/* What We Do Section CSS */
.what-we-do-section {
    background-color: #1583D0; /* Figma: Secondary Blue/B300 */
    padding: 80px 0; /* Vertical padding; horizontal handled by container */
    color: #FFFFFF;
}

.what-we-do-section .container {
    max-width: 1240px; /* Figma: Frame width */
    margin: 0 auto;
    padding: 0 20px; /* Default horizontal padding for container, Figma's 100px is large for all screens */
}

.what-we-do-header {
    text-align: left;
    margin-bottom: 40px;
}

.what-we-do-header h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 48px;

    font-weight: 600; /* Figma */
    line-height: 61px; /* Figma (48px * 1.27) */
    margin-bottom: 20px;
    color: #FFFFFF;
}

.what-we-do-header p {
    font-family: 'Geist', sans-serif;
    font-size: 20px; /* Figma */
    line-height: 31px; /* Figma (20px * 1.55) */
    max-width: 800px;
    /* margin: 0 auto 30px auto; */
    color: #EEEEEE; /* Figma */
}

.what-we-do-toggles {
    display: flex;
    justify-content: flex-start; /* Aligns buttons to the left */
    gap: 16px;
    margin-top: 30px; /* Adds space between the paragraph and the buttons */
}

.what-we-do-toggles .toggle-btn {
    font-family: 'Geist', sans-serif; /* Figma */
    font-size: 20px; /* Figma */
    font-weight: 600; /* Figma */
    padding: 14px 24px; /* Figma */
    border-radius: 24px; /* Figma (using consistent radius) */
    border: 1px solid #FFFFFF; /* Figma: Inactive button */
    background-color: transparent;
    color: #FFFFFF; /* Figma: Inactive button text */
    cursor: pointer;
    transition: all 0.3s ease;
}

.what-we-do-toggles .toggle-btn:hover {
    color: #CCCCCC; /* Lighter shade for hover on inactive */
    border-color: #CCCCCC;
}

.what-we-do-toggles .toggle-btn.active {
    background-color: #FFFFFF; /* Figma: Active button */
    color: #1583D0; /* Figma: Active button text */
    border: 1px solid #1583D0; /* Figma: Active button border */
}

.what-we-do-content .content-pane {
    display: none;
}

.what-we-do-content .content-pane.active {
    display: block;
}

.products-carousel-container,
.services-carousel {
    overflow: hidden;
    width: 100%; /* Ensure they take up available width to correctly calculate child widths */
}

/* Carousel Navigation Controls Alignment for About Us Page */
#productsContainer .carousel-nav,
#servicesContainer .services-carousel-controls {
    margin-left: auto;  /* Push control group to the right */
    margin-right: 0;
    margin-top: 24px;   /* Space above the controls */
    /* Assuming base styles like width, display:flex, gap are globally defined */
    /* For example, .carousel-nav might have width: 85px; from styles.css */
}


/* Responsive Adjustments */
@media (max-width: 1200px) { /* Adjust breakpoint for 100px padding */
    .what-we-do-section .container {
        padding: 0 60px;
    }
}

@media (max-width: 1024px) {
    .what-we-do-section .container {
        padding: 0 40px;
    }
    .what-we-do-header h2 {
        font-size: 40px;
        line-height: 1.25; /* Adjust line-height for smaller font */
    }
    .what-we-do-header p {
        font-size: 18px; /* Adjusted from 17px */
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
    .what-we-do-section {
        padding: 60px 0;
    }
    .what-we-do-section .container {
        padding: 0 20px; /* Standard mobile padding */
    }
    .what-we-do-header h2 {
        font-size: 32px;
    }
    .what-we-do-header p {
        font-size: 16px;
    }
    .what-we-do-toggles {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .what-we-do-toggles .toggle-btn {
        width: 100%;
        max-width: 300px;
        font-size: 18px; /* Adjust toggle button font for mobile */
    }
}

@media (max-width: 480px) {
    .what-we-do-header h2 {
        font-size: 28px;
    }
    .what-we-do-header p {
        font-size: 15px;
    }
}
/* End of What We Do Section CSS */

/* Team Section Styles */
.team-section {
    padding: 80px 0;
    background-color: #FFFFFF;
}

.team-section .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.team-section .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.team-section .section-header h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #1D1D1D;
    margin-bottom: 16px;
}

.team-section .section-header p {
    font-family: 'Geist', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #4F4F4F;
    /* max-width: 600px; */ /* Removed to allow single line */
    margin: 0 auto; /* Retain for centering block if needed, but text-align on parent should handle */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    justify-items: center;
}

.team-card {
    width: 384px;
    height: 520px; /* Increased height */
    perspective: 1000px;
    background-color: transparent;
    border: none;
}

.team-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.team-card:hover .team-card-inner {
    transform: rotateY(180deg);
}

.team-card-front,
.team-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.team-card-front {
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
}

.team-member-image {
    width: 100%;
    height: 400px; /* Increased height */
    background-size: auto 100%; /* Fit image height to container, width adjusts */
    background-position: center;
    background-repeat: no-repeat;
}

.team-member-info {
    padding: 24px;
    text-align: left;
    background-color: #F5F5F5;
    flex-grow: 1;
}

.team-member-info h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1D1D1D;
    margin: 0 0 4px 0;
}

.team-member-info p {
    font-family: 'Geist', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #4F4F4F;
    margin: 0;
}

.team-card-back {
    background-color: #002B45;
    color: white;
    transform: rotateY(180deg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    position: relative;
}

.team-card-back .quote-icon {
    position: absolute;
    top: 32px;
    left: 32px;
    font-size: 24px;
    color: #FFFFFF;
    opacity: 0.5;
}

.team-card-back .hand-icon {
    position: absolute;
    top: 32px;
    right: 32px;
    font-size: 24px;
    color: #FFFFFF;
    opacity: 0.5;
}

.team-card-back .quote-text {
    font-family: 'Geist', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF; /* Ensured text is white */
    margin: auto 0;
    padding-top: 40px;
    padding-bottom: 40px;
}

.team-member-info-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-member-info-back .info {
    text-align: left;
}

.team-member-info-back h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 4px 0;
}

.team-member-info-back p {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.8;
    margin: 0;
}

.team-member-info-back a {
    color: #FFFFFF;
    font-size: 20px;
    text-decoration: none;
}

.team-member-info-back a:hover {
    opacity: 0.8;
}

/* Awards Section Styles */
.awards-section {
    padding: 20px 0 80px 0; /* Top, Right, Bottom, Left */
    background-color: #FFFFFF;
}

.awards-section .section-header {
    text-align: center;
    margin-bottom: 30px;
}

.awards-section .section-header h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 61px;
    color: #252525;
}

.awards-carousel-container {
    overflow-x: hidden; /* Hide cards horizontally for carousel effect */
    overflow-y: visible; /* Allow icons to overflow vertically */
    width: 100%; /* Takes width of its parent */
    max-width: 1180px; /* Max width for 3 cards (3*380 + 2*20) */
    margin: 0 auto; /* Center the carousel container */
    /* padding-top removed */
}

.awards-carousel {
    display: flex;
    gap: 20px;
    margin-top: 50px; /* Create space above cards for icons */
    /* Carousel JS will handle the positioning */
}

.award-card {
    box-sizing: border-box;
    position: relative;
    flex: 0 0 380px; /* Do not grow or shrink, base width 380px */
    width: 380px;
    height: 392px;
    background: #E8F3FA;
    border: 2px solid #C0D4FA;
    border-radius: 12px;
    padding: 60px 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    text-align: left; /* Align text to the left */
    overflow: visible; /* Allow icon to overflow the card bounds */
}

.awards-section .award-card .award-icon {
    position: absolute;
    top: -40px; /* Positions the center of the icon roughly on the card's top edge */
    left: 16px; /* Aligns with the card's internal padding */
    width: 80px;
    height: 80px;
    background-color: #1181D0; /* Blue background for the circle */
    border: 3.5px solid #BDD2FC; /* Light blue border */
    border-radius: 50%; /* Makes it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
}

.awards-section .award-card .award-icon img {
    display: block;
    width: 45px; /* Size of the white graphic inside the blue circle */
    height: 45px;
    object-fit: contain; /* Scales the image to fit, preserving aspect ratio */
    border: none;
    padding: 0;
    margin: 0;
}

.award-card-content {
    padding-top: 50px; /* Space for the icon from the top edge of card content area */
    /* Card itself has padding: 60px 16px 10px; icon is top: -40px, left: 16px */
    /* Text content starts below the icon. */
    width: 100%;
}

.award-card-content h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    color: #3E3E3E;
    margin-bottom: 23px;
}

.award-card-content p {
    font-family: 'Geist', sans-serif;
    font-size: 20px;
    line-height: 31px;
    color: #797979;
}

.award-card-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 152px;
    background: linear-gradient(292.61deg, rgba(17, 129, 208, 0) 72.6%, #1181D0 92.51%);
    opacity: 0.15;
    z-index: 0;
}

.awards-nav-wrapper {
    width: 100%;
    max-width: 1180px; /* Match the max-width of the carousel container */
    margin: 40px auto 0 auto; /* Center the wrapper */
    display: flex;
    justify-content: flex-end; /* Align the actual button group to the right */
}

.awards-section .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 85px; /* As per Figma */
    height: 36px;
    gap: 4px; /* As per Figma */
}

.awards-section .carousel-nav .nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 22px; /* Approx from 22.0408px */
    background: #FFFFFF;
    border: 1px solid #4F4F4F; /* Default enabled state */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.awards-section .carousel-nav .nav-arrow i {
    font-size: 16px; /* Adjust icon size as needed, Figma implies ~21px for image */
    color: #4F4F4F;
}

.awards-section .carousel-nav .nav-arrow:disabled {
    border-color: #B2B2B2;
    opacity: 0.4;
    cursor: not-allowed;
}

.awards-section .carousel-nav .nav-arrow:disabled i {
    color: #B2B2B2;
}


/* Responsive Team Section */
@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    .team-card {
        width: 100%;
        max-width: 384px; /* Maintain card width on smaller screens */
    }
    .team-section .section-header h2 {
        font-size: 32px;
    }
    .team-section .section-header p {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .team-section .section-header h2 {
        font-size: 28px;
    }
    .team-section .section-header p {
        font-size: 16px;
    }
    .team-card-back .quote-text {
        font-size: 18px;
    }
}