* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    min-height: 100vh;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

input, textarea {
    outline: none;
    border: none;
    font-family: inherit;
    background: transparent;
}

input::placeholder {
    color: inherit;
    opacity: 0.5;
}

.figma-btn {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    outline: none;
    transition: filter 0.2s ease, transform 0.1s ease;
}

.figma-btn:hover {
    filter: brightness(0.9);
}

.figma-btn:active {
    transform: scale(0.98);
}

img {
    display: block;
    max-width: 100%;
}

.c-desktop_4_172 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.c-hero-section_1_29 {
    position: relative;
    height: 401px;
    align-self: stretch;
    background-image: url("./contact-bg.png");
    background-size: cover;
    background-position: center;
    background-color: rgb(255, 255, 255);
}

.c-hero-content_1_30 {
    position: absolute;
    left: 119px;
    top: 95px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    width: 403px;
    height: 211px;
}

.c-frame-1_4_236 {
    position: relative;
    width: 302px;
    height: 112px;
}

.c-contact-whale-cloud_1_31 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 302px;
    height: 38px;
    color: rgb(0, 0, 0);
    font-size: 32px;
    font-weight: 900;
    white-space: pre-wrap;
    word-break: break-word;
    width: max-content;
    display: flex;
    align-items: center;
}

.c-ready-to-connect--let-s-create-what-s-next----together-_1_32 {
    position: absolute;
    left: 0px;
    top: 62px;
    width: 289px;
    height: 50px;
    color: rgb(0, 0, 0);
    font-size: 21px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: max-content;
    display: flex;
    align-items: center;
}

.c-frame-7_4_258 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-primary-button_1_34 {
    position: relative;
    width: 197px;
    height: 41px;
    border-radius: 12px;
}

.c-primary-button_4_256 {
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    padding: 12px 24px 12px 24px;
    width: 197px;
    height: 41px;
    background-color: rgb(56, 128, 247);
    border-radius: 8px;
}

.c-contact-us_1_35 {
    position: absolute;
    left: 0px;
    top: -0.5px;
    width: 195px;
    height: 41px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
    width: 195px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-main-section_4_242 {
    position: relative;
    height: auto;
    align-self: stretch;
}

.c-main-section_2_49 {
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 120px 80px 120px;
    width: 1000px;
    height: auto;
    align-self: stretch;
    background-color: rgb(247, 247, 250);
}

.c-contact-form-card_2_50 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 32px 32px 32px;
    width: 400px;
    height: auto;
    border-radius: 20px;
}

.c-component-9_4_250 {
    position: relative;
    height: 48px;
    align-self: stretch;
}

.c-first-name-__4_250_2_51 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 144.47999572753906px;
    height: 19px;
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 144.47999572753906px;
    display: flex;
    align-items: center;
}

.c-input__4_250_2_52 {
    position: absolute;
    left: 0px;
    top: 24px;
    position: relative;
    width: 320px;
    height: 32px;
    background-color: rgb(255, 255, 255);
}

.c-component-2_2_98 {
    position: relative;
    height: 48px;
    align-self: stretch;
}

.c-first-name-__2_98_2_51 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 144.47999572753906px;
    height: 19px;
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 144.47999572753906px;
    display: flex;
    align-items: center;
}

.c-input__2_98_2_52 {
    position: absolute;
    left: 0px;
    top: 24px;
    position: relative;
    width: 320px;
    height: 32px;
    background-color: rgb(255, 255, 255);
}

.c-component-4_2_106 {
    position: relative;
    height: 48px;
    align-self: stretch;
}

.c-first-name-__2_106_2_51 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 144.47999572753906px;
    height: 19px;
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 144.47999572753906px;
    display: flex;
    align-items: center;
}

.c-input__2_106_2_52 {
    position: absolute;
    left: 0px;
    top: 24px;
    position: relative;
    width: 320px;
    height: 32px;
    background-color: rgb(255, 255, 255);
}

.c-component-3_2_102 {
    position: relative;
    height: 48px;
    align-self: stretch;
}

.c-first-name-__2_102_2_51 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 144.47999572753906px;
    height: 19px;
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 144.47999572753906px;
    display: flex;
    align-items: center;
}

.c-input__2_102_2_52 {
    position: absolute;
    left: 0px;
    top: 24px;
    position: relative;
    width: 320px;
    height: 32px;
    background-color: rgb(255, 255, 255);
}

.c-component-5_3_112 {
    position: relative;
    height: 48px;
    align-self: stretch;
}

.c-first-name-__3_112_2_51 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 144.47999572753906px;
    height: 19px;
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 144.47999572753906px;
    display: flex;
    align-items: center;
}

.c-input__3_112_2_52 {
    position: absolute;
    left: 0px;
    top: 24px;
    position: relative;
    width: 320px;
    height: 32px;
    background-color: rgb(255, 255, 255);
}

.c-component-6_3_116 {
    position: relative;
    height: 48px;
    align-self: stretch;
}

.c-first-name-__3_116_2_51 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 144.47999572753906px;
    height: 19px;
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 144.47999572753906px;
    display: flex;
    align-items: center;
}

.c-input__3_116_2_52 {
    position: absolute;
    left: 0px;
    top: 24px;
    position: relative;
    width: 320px;
    height: 32px;
    background-color: rgb(255, 255, 255);
}

.c-component-7_3_120 {
    position: relative;
    height: 48px;
    align-self: stretch;
}

.c-first-name-__3_120_2_51 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 144.47999572753906px;
    height: 19px;
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 144.47999572753906px;
    display: flex;
    align-items: center;
}

.c-input__3_120_2_52 {
    position: absolute;
    left: 0px;
    top: 24px;
    position: relative;
    width: 320px;
    height: 32px;
    background-color: rgb(255, 255, 255);
}

.c-component-8_3_132 {
    position: relative;
    height: 108px;
    align-self: stretch;
}

.c-requests-comments_3_130 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 255.36000061035156px;
    height: 19px;
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 255.36000061035156px;
    display: flex;
    align-items: center;
}

.c-input_3_128 {
    position: absolute;
    left: 0px;
    top: 32px;
    width: 320px;
    height: 76px;
    align-self: stretch;
    background-color: rgb(255, 255, 255);
    border: none;
    outline: none;
}

.c-checkbox_4_246 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 4px 4px 4px;
    height: 75px;
    align-self: stretch;
}

.c-submit-button_2_55 {
    position: relative;
    width: 156px;
    height: 34px;
    border: 1px solid rgb(56, 128, 247);
    border-radius: 4px;
}

.c-contact-us_2_56 {
    position: absolute;
    left: 15px;
    top: 5px;
    width: 125px;
    height: 23px;
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 700;
    white-space: pre-wrap;
    word-break: break-word;
    width: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-info-panel_2_61 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 300px;
    align-items: flex-start;
}

.c-hq-card_2_62 {
    display: flex;
    flex-direction: column;
    gap: 17px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 30px 10px 30px;
    width: 300px;
    background-color: rgb(56, 128, 247);
    border-radius: 20px;
}

.c-headquarters_3_133 {
    width: 225px;
    height: auto;
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    white-space: pre-wrap;
    word-break: break-word;
    display: flex;
    align-items: flex-start;
}

.c-no--178--software-avenue--yuhuatai-district--nanjing--china_2_64 {
    width: 249px;
    height: auto;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    display: flex;
    align-items: flex-start;
}

.c-email--bol-iwhalecloud-com_2_63 {
    width: 238px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 238px;
    display: flex;
    align-items: center;
}

.c-office-card_2_58 {
    display: flex;
    flex-direction: column;
    gap: 17px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 17px 30px 17px 30px;
    width: 300px;
    background-color: rgb(56, 128, 247);
    border-radius: 20px;
}

.c-frame-5_4_240 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-worldwide-offices_4_139 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    white-space: pre-wrap;
    word-break: break-word;
    width: max-content;
    display: flex;
    align-items: flex-start;
}

.c-frame-2_4_237 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-chile_4_164 {
    width: 240px;
    height: auto;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
    width: 240px;
    display: flex;
    align-items: flex-start;
}

.c-mariano-sanchez-fontecilla-311--las-condes_4_163 {
    width: 252px;
    height: auto;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 252px;
    display: flex;
    align-items: flex-start;
}

.c-frame-3_4_238 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-colmbia_4_168 {
    width: 240px;
    height: 24px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
    width: 240px;
    display: flex;
    align-items: center;
}

.c-transversal-23-no--97-73-301-y-302_4_167 {
    width: 252px;
    height: 20px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 252px;
    display: flex;
    align-items: center;
}

.c-frame-4_4_239 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-india_4_150 {
    width: 240px;
    height: 21px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
    width: 240px;
    display: flex;
    align-items: center;
}

.c-unit-no-409--4th-floor--time-tower--m-g-road--sector-28--gurgaon-12002_4_148 {
    width: 252px;
    height: 60px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 252px;
    display: flex;
    align-items: center;
}

.c-1104--11th-floor--ambadeep-building--kasturba-gandhi-marg--new-delhi-110001_4_145 {
    width: 252px;
    height: 60px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 252px;
    display: flex;
    align-items: center;
}

.c-frame-6_4_241 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
}

.c-indonesia_4_155 {
    width: 240px;
    height: 24px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
    width: 240px;
    display: flex;
    align-items: center;
}

.c-world-capital-tower-jl--dr--ide-anak-agung-gde-agung-lot-d--kawasan-mega-kuningan-jakarta-selatan-12950_4_154 {
    width: 252px;
    height: 80px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    width: 252px;
    display: flex;
    align-items: center;
}

/* --- Responsive & Style Overrides --- */
:root {
    --primary-blue: #0047bb;
    --required-red: #ff4d4f;
}

body {
    margin: 0;
    padding: 40px;
    /* Desktop default padding */
    background: #f7f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    /* Unified Font: Roboto */
    -webkit-font-smoothing: antialiased;
}

/* Force font for all children if not overridden by figma styles */
* {
    font-family: 'Roboto', sans-serif !important;
}

.c-desktop_4_172 {
    width: 100% !important;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* Fix container for responsiveness */
.c-main-section_4_242 {
    height: auto !important;
    padding-bottom: 60px !important;
}

.c-main-section_2_49 {
    width: 100% !important;
    display: flex;
    gap: 40px;
}

/* Red Star for Required Fields */
.required-star {
    color: var(--required-red);
    margin-left: 2px;
}

/* Clean up button appearance */
.figma-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.figma-btn:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

/* Scrollbar Style from Desktop/index.html */
#offices-list::-webkit-scrollbar {
    width: 4px;
}

#offices-list::-webkit-scrollbar-track {
    background: transparent;
}

#offices-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

#offices-list::-webkit-scrollbar-thumb:hover {
    background: #999;
}

#submission-msg {
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
    display: none;
    padding: 10px;
    border-radius: 8px;
}

/* Office List Container */
#offices-list {
    flex: 1;
    overflow-y: auto;
    max-height: 500px;
    padding-right: 10px;
}

/* Hero Section Flex Layout Fix */
.c-hero-content_1_30 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 32px !important;
    /* Space between text and button */
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    position: relative;
}

.c-frame-1_4_236 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    /* Space between Main Title and Subtitle */
    width: 302px !important;
    /* Figma width */
    height: auto !important;
    position: static !important;
}

.c-contact-whale-cloud_1_31 {
    position: static !important;
    width: 302px !important;
    /* Figma width */
    height: auto !important;
    display: block !important;
}

.c-ready-to-connect--let-s-create-what-s-next----together-_1_32 {
    position: static !important;
    /* Remove absolute positioning */
    width: 289px !important;
    white-space: normal !important;
    height: auto !important;
    display: block !important;
    text-align: left !important;
}

.c-frame-7_4_258 {
    position: static !important;
}

/* Banner Button Styling Fixes */
#hero-cta-button.c-primary-button_1_34 {
    background-color: rgb(56, 128, 247) !important;
    /* Office card blue */
    border-radius: 12px;
    width: 180px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hero-cta-button .c-contact-us_1_35 {
    color: #fff !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    text-align: center !important;
    display: block !important;
}

/* HQ Address Wrap Fix */
.c-hq-card_2_62 {
    width: 100% !important;
    max-width: 320px;
    height: auto !important;
    padding: 24px !important;
}

.c-no--178--software-avenue--yuhuatai-district--nanjing--china_2_64 {
    width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}

/* Office Item Layout Improvement */
.office-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Minimized space */
    margin-bottom: 14px;
    /* Reduced by 30% */
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.office-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Specific style for country name spacing */
.c-chile_4_164 {
    margin-bottom: 0px !important;
    display: block !important;
}

/* MOBILE ADAPTATION (Max width 800px) */
@media (max-width: 800px) {
    body {
        padding: 0;
    }

    /* Remove padding on mobile */

    .c-desktop_4_172 {
        width: 100% !important;
    }

    .c-hero-section_1_29 {
        height: auto !important;
        min-height: 350px;
        padding: 60px 20px !important;
        background-position: center;
        background-image: url("./contact-bg-sm.png"); /* Mobile specific background */
        display: flex;
        align-items: center;
    }

    .c-hero-section_1_29 {
        padding: 40px 20px !important;
        min-height: 280px;
    }

    .c-hero-content_1_30 {
        left: 0 !important;
        top: auto !important;
        position: relative !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 20px;
        width: 100% !important;
        max-width: none !important;
    }

    .c-frame-1_4_236 {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .c-contact-whale-cloud_1_31 {
        font-size: 28px !important;
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
    }

    .c-ready-to-connect--let-s-create-what-s-next----together-_1_32 {
        font-size: 18px !important;
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
        white-space: normal !important;
    }

    #hero-cta-button.c-primary-button_1_34 {
        width: 160px !important;
        height: 44px !important;
    }

    .c-main-section_2_49 {
        flex-direction: column !important;
        padding: 30px 20px !important;
        gap: 30px !important;
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
        width: 100% !important;
    }

    .c-contact-form-card_2_50,
    .c-info-panel_2_61 {
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
    }

    .c-contact-form-card_2_50 input,
    .c-contact-form-card_2_50 textarea {
        width: 100% !important;
    }

    .c-hq-card_2_62,
    .c-office-card_2_58 {
        width: 100% !important;
        max-width: none !important;
    }

    #offices-list {
        max-height: 300px;
    }
}

/* --- Migrated Inline Styles --- */
.checkbox-container {
    display: flex !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
}

#consent_checkbox {
    margin-right: 10px !important;
    width: 18px !important;
    height: 18px !important;
}

.privacy-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #666 !important;
}

.c-frame-5_4_240 {
    margin-bottom: 15px !important;
}

/* --- Page Header & Footer --- */
.page-header {
    background-color: #000000;
    padding: 0 60px;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.header-logo {
    height: 100%;
    width: auto;
    display: block;
}

.page-footer {
    background-color: #f7f7fa;
    padding: 20px 60px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.copyright {
    color: #666666;
    font-size: 14px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

@media (max-width: 768px) {
    .page-header {
        padding: 12px 20px;
    }

    .page-footer {
        padding: 30px 20px;
    }
}

/* Thank You Message Styling */
.thank-you-message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    width: 400px; /* Same width as the form card */
    height: auto; /* Allow height to adjust */
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    font-family: 'Roboto', sans-serif;
    color: #000000;
    text-align: center; /* Center text horizontally */
}

.thank-you-message-container p {
    margin: 0;
    color: #000000;
}

.thank-you-message-container p:first-child {
    font-size: 28px;
    font-weight: bold;
}

.thank-you-message-container p:last-child {
    font-size: 18px;
}

@media (max-width: 800px) {
    .thank-you-message-container {
        width: 100% !important;
        padding: 24px !important;
    }
}