/* ====================================
   WHY BITSFLOW PAGE STYLES
   ==================================== */

/* === Commitment Section === */
.commitment-section {
    padding: 80px 0;
    background-color: #fff;
    text-align: center;
}

.commitment-section h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 50px;
}

.commitment-cards {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.commitment-cards .card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 40px;
    flex: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.commitment-cards .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.card .card-icon {
    font-size: 2.5rem;
    color: #0d6efd;
    margin-bottom: 20px;
}

.card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.card p {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
}

/* === Core Values Section === */
.values-section {
    padding: 80px 0;
    background-color: #f8f9fa;
    text-align: center;
}

.values-section h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 50px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.value-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    border: 1px solid #e9ecef;
}

.value-card .value-icon {
    font-size: 2rem;
    color: #0d6efd;
    margin-bottom: 15px;
}

.value-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.value-card p {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
}

/* === Leadership Section === */
.leadership-section {
    padding: 80px 0;
    text-align: center;
}

.leadership-section h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 50px;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.leader-card {
    text-align: center;
}

.leader-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 3px solid #0d6efd;
}

.leader-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.leader-card p {
    color: #6c757d;
}

/* === CTA Section (reusing from styles.css) === */
/* No new styles needed if structure is the same */

/* === Responsive Styles === */
@media (max-width: 992px) {
    .commitment-cards {
        flex-direction: column;
    }

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

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

@media (max-width: 768px) {
    .why-hero-section h1 {
        font-size: 2.5rem;
    }

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

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


/* === Technology Section === */
.technology-section {
    background: #1181D0; /* Figma: background: #1181D0; */
    padding: 50px 0; /* Figma: padding: 50px 100px; - using 0 for L/R assuming .container handles it */
    color: #FFFFFF;
}

.technology-section .container {
    max-width: 1240px; /* Figma: width: 1240px for inner frame */
    margin: 0 auto;
    padding: 0 20px; /* Basic horizontal padding for container */
}

.technology-section h2 {
    font-family: 'Be Vietnam Pro', sans-serif; /* Figma: font-family: 'Be Vietnam Pro'; */
    font-style: normal;
    font-weight: 600;
    font-size: 48px; /* Figma: font-size: 48px; */
    line-height: 61px; /* Figma: line-height: 61px; */
    text-align: center;
    color: #FFFFFF; /* Figma: color: #FFFFFF; */
    margin-bottom: 38px; /* Figma: gap: 38px; */
}

.technology-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Figma: gap: 20px; */
}

.technology-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align icon and text block to start */
    padding: 24px; /* Figma: padding: 16px 24px; - simplified to 24px */
    gap: 16px; /* Figma: gap: 16px; */
    background: #EBF1FD; /* Figma: background: #EBF1FD; */
    border: 2px solid #C0D4FA; /* Figma: border: 2px solid #C0D4FA; */
    border-radius: 12px; /* Figma: border-radius: 12px; */
}

.tech-icon-frame {
    width: 52px; /* Figma: width: 52px; */
    height: 52px; /* Figma: height: 52px; */
    background: #1181D0; /* Figma: background: #1181D0; */
    border: 3.5px solid #BDD2FC; /* Figma: border: 3.54545px solid #BDD2FC; */
    border-radius: 50%; /* Figma: border-radius: 63.8182px; (effectively 50% for circle) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF; /* Icon color */
    font-size: 24px; /* Adjust icon size as needed */
}

.tech-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Figma: gap: 10px; between h3 and p */
}

.technology-card h3 {
    font-family: 'Geist', sans-serif; /* Figma: font-family: 'Geist'; */
    font-style: normal;
    font-weight: 500;
    font-size: 26px; /* Figma: font-size: 26px; */
    line-height: 34px; /* Figma: line-height: 34px; */
    color: #163064; /* Figma: color: #163064; */
    margin: 0;
}

.technology-card p {
    font-family: 'Geist', sans-serif; /* Figma: font-family: 'Geist'; */
    font-style: normal;
    font-weight: 400;
    font-size: 16px; /* Figma: font-size: 16px; */
    line-height: 20px; /* Figma: line-height: 20px; */
    color: #1D3F83; /* Figma: color: #1D3F83; */
    margin: 0;
}

/* Responsive adjustments for Technology Section */
@media (max-width: 992px) {
    .technology-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .technology-section {
        padding: 40px 0;
    }
    .technology-section h2 {
        font-size: 36px;
        line-height: 48px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .technology-grid {
        grid-template-columns: 1fr;
    }
    .technology-section {
        padding: 30px 0;
    }
    .technology-section h2 {
        font-size: 28px;
        line-height: 38px;
        margin-bottom: 25px;
    }
    .technology-card {
        padding: 20px;
    }
    .technology-card h3 {
        font-size: 22px;
        line-height: 30px;
    }
    .technology-card p {
        font-size: 15px;
        line-height: 22px;
    }
}

/* Partners Section */
.partners-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0; /* Assuming .container handles horizontal padding */
    background: #FFFFFF;
    width: 100%;
}

.partners-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.partners-section .partners-heading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.partners-section h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 61px;
    color: #1D3F83;
    text-align: center;
    margin: 0;
}

.partners-section .subtitle {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 31px;
    color: #3E3E3E;
    text-align: center;
    margin: 0;
}

.partners-section .partners-logo-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Gap between rows */
    width: 100%;
}

.partners-section .partners-logo-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Gap between logo frames */
    flex-wrap: wrap;
}

.partners-section .partner-logo-frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    width: 295px;
    height: 84px;
    border: 1px solid #C0D4FA;
    border-radius: 12px;
    box-sizing: border-box;
}

.partners-section .partner-logo-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    height: 52px; /* Approximate height based on Figma images */
}

.partners-section .partner-logo-frame.more-partners span {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 34px;
    color: #5D8FF1;
    text-align: center;
}

/* Responsive adjustments for partners section */
@media (max-width: 1280px) { /* Slightly wider than 4x295 + 3x20 = 1240px grid */
    .partners-section .partner-logo-frame {
        width: calc(25% - 15px); /* (100% - (20px * 3 gaps)) / 4 columns */
    }
}

@media (max-width: 992px) { /* Tablet */
    .partners-section h2 {
        font-size: 36px;
        line-height: 48px;
    }
    .partners-section .subtitle {
        font-size: 18px;
        line-height: 28px;
    }
    .partners-section .partner-logo-frame {
        width: calc(33.333% - 13.34px); /* (100% - (20px * 2 gaps)) / 3 columns */
    }
    .partners-section .partner-logo-frame.more-partners span {
        font-size: 20px;
    }
}

@media (max-width: 768px) { /* Mobile */
    .partners-section {
        padding: 30px 0;
        gap: 30px;
    }
    .partners-section h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .partners-section .subtitle {
        font-size: 16px;
        line-height: 24px;
    }
    .partners-section .partner-logo-frame {
        width: calc(50% - 10px); /* (100% - (20px * 1 gap)) / 2 columns */
    }
    .partners-section .partner-logo-frame.more-partners span {
        font-size: 18px;
    }
}

@media (max-width: 480px) { /* Smaller Mobile */
    .partners-section .partner-logo-frame {
        width: 100%; /* 1 column */
    }
    .partners-section .partners-logo-row {
        gap: 0; /* Remove horizontal gap if items stack */
    }
     .partners-section .partner-logo-frame:not(:last-child) { /* Add vertical gap when stacked */
        margin-bottom: 15px;
    }
    .partners-section .partner-logo-frame.more-partners { /* Ensure last item doesn't have bottom margin if it's the only one or last in a stack */
        margin-bottom: 0;
    }
}
/* End Partners Section */


/* Tech Partners Section */
.tech-partners-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    background: #FFFFFF;
    width: 100%;
}

.tech-partners-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1340px;
    padding: 0 20px;
    box-sizing: border-box;
}

.tech-partners-heading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 100%;
    text-align: center;
}

.tech-partners-heading-block h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 61px;
    color: #252525;
    margin: 0;
}

.tech-partners-heading-block .subtitle {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 31px;
    color: #3E3E3E;
    margin: 0;
    max-width: 700px;
}

.tech-partners-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 40px;
    width: 100%;
    max-width: 1240px;
}

.tech-partners-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.tech-partner-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 12px;
    width: 295px;
    height: 126px;
    border: 1px solid #C0D4FA;
    border-radius: 12px;
    box-sizing: border-box;
    text-align: center;
}

.tech-partner-card img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tech-partner-card h4 {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 34px;
    color: #163064;
    margin: 0;
}

/* Responsive adjustments for tech partners section */
@media (max-width: 1280px) {
    .tech-partners-heading-block h2 {
        font-size: 40px;
        line-height: 52px;
    }
    .tech-partners-heading-block .subtitle {
        font-size: 18px;
        line-height: 28px;
    }
    .tech-partner-card {
        width: calc(25% - 15px);
        min-width: 220px;
    }
     .tech-partner-card h4 {
        font-size: 22px;
        line-height: 30px;
    }
}

@media (max-width: 992px) {
    .tech-partners-heading-block h2 {
        font-size: 36px;
        line-height: 48px;
    }
    .tech-partners-heading-block .subtitle {
        font-size: 18px;
        line-height: 28px;
    }
    .tech-partner-card {
        width: calc(33.333% - 14px);
        min-width: 200px;
    }
    .tech-partner-card h4 {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 768px) {
    .tech-partners-section {
        padding: 30px 0;
    }
    .tech-partners-section .container {
        gap: 30px;
        padding: 0 15px; /* Adjust container padding for mobile */
    }
    .tech-partners-heading-block h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .tech-partners-heading-block .subtitle {
        font-size: 16px;
        line-height: 24px;
    }
    .tech-partner-card {
        width: calc(50% - 10px);
        min-width: 180px;
        height: auto;
        padding: 20px 16px;
    }
     .tech-partner-card h4 {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 480px) {
    .tech-partner-card {
        width: 100%;
        min-width: unset;
    }
    .tech-partners-row {
        gap: 15px;
    }
}
/* End Tech Partners Section */