/* Fonts */
@font-face {
    font-family: 'gilroy-regular';
    src: url('open-iconic/font/Gilroy-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'gilroy-semibold';
    src: url('open-iconic/font/Gilroy-SemiBold.ttf') format('truetype');
}
/* Fonts */

html, body {
    font-family: 'gilroy-semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #fcfdfe;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* General */
.mainpage-container {
    text-align: center;
}

.justify-self-center {
    justify-self: center;
}

.light-text {
    color: #2C2C2C80;
    opacity: 0.9;
}

.title-text {
    margin-top: 150px;
}

.large-text {
    margin-top: 20px;
    margin-bottom: 0px !important;
    font-weight: 400;
    font-size: 27px;
    letter-spacing: 2%;
    text-align: center;
    vertical-align: middle;
    font-family: gilroy-regular;
}

/* Button */
.blue-btn {
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    gap: 8px;
    /* Size */
    width: 290px;
    height: 53px;
    /* Style */
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    border-radius: 1000px;
    border: none;
    /* Text */
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    /* Interaction */
    cursor: pointer;
    transition: all 0.3s ease;
}

    .blue-btn:hover {
        transform: translateY(-2px);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 4px 8px 50px rgba(29, 187, 241, 0.7);
    }

    .blue-btn:active {
        transform: translateY(0);
        box-shadow: -4px -4px 12px rgba(255, 255, 255, 0.6), 2px 4px 30px rgba(29, 187, 241, 0.5);
    }

/* Image Banner */
.banner-img {
    height: 530px;
    width: 923px;
    border-radius: 30px;
    background: #F6FBFF;
    margin: 20px;
    object-fit: cover;
    box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
}

.banner-img-lg {
    height: 500px;
    width: 1100px;
    border-radius: 30px;
    object-fit: cover;
    background: #F6FBFF;
    margin: 20px;
    box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
}

@media (max-width: 1024px) {
    .banner-img {
        height: 530px;
        width: 100%;
        border-radius: 30px;
        background: #F6FBFF;
        margin: auto;
        object-fit: cover;
        box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    }

    .banner-img-lg {
        height: 500px;
        width: 100%;
        border-radius: 30px;
        object-fit: cover;
        background: #F6FBFF;
        margin: auto;
        box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    }
}


@media (max-width: 768px) {
    .banner-img {
        height: 530px;
        width: 100%;
        border-radius: 30px;
        background: #F6FBFF;
        margin: auto;
        object-fit: cover;
        box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    }

    .banner-img-lg {
        height: 500px;
        width: 100%;
        border-radius: 30px;
        object-fit: cover;
        background: #F6FBFF;
        margin: auto;
        box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    }
}


/* Cards */
/* Card Container */
.service-card {
    width: 544px;
    height: 625px;
    margin: 20px;
    text-align: left;
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Card Image */
.service-card-image {
    position: absolute;
    width: 480px;
    height: 315px;
    left: 5.5%;
    top: 32px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    filter: drop-shadow(5px 2px 16px rgba(136, 165, 191, 0.78));
    border-radius: 30px;
    overflow: hidden;
}

    .service-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Card Content */
.service-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 25px;
    position: absolute;
    width: 480px;
    left: 32px;
    top: 383px;
}

/* Text Section */
.service-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 15px;
    width: 100%;
}

/* Card Title */
.service-card-title {
    width: 100%;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 130%;
    color: #2C2C2C;
    margin: 0;
}

/* Card Description */
.service-card-description {
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

/* Card Button */
.service-card-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    gap: 8px;
    width: 256px;
    height: 53px;
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    border-radius: 1000px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .service-card-btn:hover {
        transform: translateY(-2px);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 4px 8px 50px rgba(29, 187, 241, 0.7);
    }

    .service-card-btn:active {
        transform: translateY(0);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .service-card {
        width: 100%;
        max-width: 544px;
        height: auto;
        min-height: 625px;
    }

    .service-card-image {
        width: calc(100% - 64px);
        height: 250px;
    }

    .service-card-content {
        width: calc(100% - 64px);
        top: 315px;
    }

    .service-card-title {
        font-size: 20px;
    }

    .service-card-description {
        font-size: 16px;
    }

    .service-card-btn {
        width: 100%;
        max-width: 256px;
    }
}



/* Horizontal Card Container */
.horizontal-card {
    margin-top: 50px;
    max-width: 1120px;
    height: 383px;
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

    .horizontal-card:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Card Inner Content */
.horizontal-card-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    gap: 96px;
    height: 100%;
    box-sizing: border-box;
}

/* Text Content (Left Side) */
.horizontal-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 25px;
    width: 480px;
    flex-shrink: 0;
}

/* Text Section */
.horizontal-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 15px;
    width: 100%;
}

/* Card Title */
.horizontal-card-title {
    width: 100%;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 130%;
    color: #2C2C2C;
    margin: 0;
}

/* Card Description */
.horizontal-card-description {
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

/* Card Button */
.horizontal-card-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    gap: 8px;
    width: 242px;
    height: 53px;
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    border-radius: 1000px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .horizontal-card-btn:hover {
        transform: translateY(-2px);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 4px 8px 50px rgba(29, 187, 241, 0.7);
    }

    .horizontal-card-btn:active {
        transform: translateY(0);
    }

/* Image Container (Right Side) */
.horizontal-card-image {
    width: 480px;
    height: 315px;
    position: relative;
    background: #F6FBFF;
    border-radius: 30px;
    overflow: hidden;
    flex-shrink: 0;
}

    .horizontal-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .horizontal-card {
        width: 90%;
        height: auto;
    }

    .horizontal-card-inner {
        gap: 40px;
        padding: 24px;
    }

    .horizontal-card-content {
        width: 45%;
    }

    .horizontal-card-image {
        width: 45%;
        height: 280px;
    }
}

@media (max-width: 768px) {
    .horizontal-card {
        height: auto;
        min-height: 500px;
    }

    .horizontal-card-inner {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }

    .horizontal-card-content {
        width: 100%;
    }

    .horizontal-card-image {
        width: 100%;
        height: 250px;
    }

    .horizontal-card-title {
        font-size: 20px;
    }

    .horizontal-card-description {
        font-size: 16px;
    }

    .horizontal-card-btn {
        width: 100%;
        max-width: 242px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .service-card {
        width: 100%;
        max-width: 380px;
        height: auto;
        min-height: 480px;
    }

    .service-card-image {
        width: calc(100% - 40px);
        height: 200px;
    }

    .service-card-content {
        width: calc(100% - 40px);
        top: 240px;
    }

    .service-card-title {
        font-size: 16px;
    }

    .service-card-description {
        font-size: 13px;
    }

    .service-card-btn {
        width: 100%;
        max-width: 220px;
    }
}

/* Wide Card (Left Card) */
.wide-card {
    width: 736px;
    height: 424px;
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .wide-card:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Wide Card Content */
.wide-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px;
    gap: 25px;
    position: absolute;
    width: 672px;
    height: 360px;
    left: 32px;
    top: 32px;
}

/* Wide Card Text Section */
.wide-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 15px;
    width: 100%;
}

/* Wide Card Title */
.wide-card-title {
    width: 100%;
    font-style: normal;
    font-weight: 600;
    font-size: 35px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
    margin: 0;
}

/* Wide Card Description */
.wide-card-description {
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

/* Wide Card Button */
.wide-card-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    gap: 8px;
    width: 260px;
    height: 53px;
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    border-radius: 1000px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .wide-card-btn:hover {
        transform: translateY(-2px);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 4px 8px 50px rgba(29, 187, 241, 0.7);
    }

    .wide-card-btn:active {
        transform: translateY(0);
    }

/* Tall Card (Right Card) */
.tall-card {
    width: 352px;
    height: 424px;
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

    .tall-card:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Tall Card Inner Container */
.tall-card-inner {
    position: absolute;
    width: 322px;
    height: 394px;
    left: 15px;
    top: 15px;
    background: #F6FBFF;
    border-radius: 30px;
    overflow: hidden;
}

/* Tall Card Image */
.tall-card-image {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tall-card-image img {
        width: auto;
        height: 100%;
        max-width: none;
        object-fit: fill;
    }

/* Card Container for Layout */
.cards-container {
    text-align: left;
    margin: 20px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 32px;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .wide-card {
        width: 100%;
        max-width: 736px;
        height: auto;
        min-height: 424px;
    }

    .wide-card-content {
        width: calc(100% - 64px);
        height: auto;
    }

    .wide-card-title {
        font-size: 28px;
    }

    .wide-card-description {
        font-size: 16px;
    }

    .tall-card {
        width: 100%;
        max-width: 352px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .cards-container {
        flex-direction: column;
        gap: 20px;
    }

    .wide-card {
        width: 100%;
    }

    .wide-card-content {
        gap: 20px;
        padding: 20px;
        position: relative;
        left: 0;
        top: 0;
    }

    .wide-card-title {
        font-size: 24px;
    }

    .wide-card-description {
        font-size: 14px;
    }

    .wide-card-btn {
        width: 100%;
        max-width: 260px;
    }

    .tall-card {
        width: 100%;
        height: 350px;
    }

    .tall-card-inner {
        width: calc(100% - 30px);
        height: calc(100% - 30px);
    }
}

/* Four Pillars Container */
.pillars-section {
    justify-self: center;
    margin: 25px 0px 100px 0px;
    text-align: left;
    width: 100%;
    max-width: 1120px;
    height: auto;
    min-height: 427px;
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 32px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .pillars-section:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Header Section */
.pillars-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    width: 100%;
    margin-bottom: 34px;
}

/* Title */
.pillars-title {
    width: 100%;
    font-style: normal;
    font-weight: 600;
    font-size: 35px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
    margin: 0;
}

/* Subtitle */
.pillars-subtitle {
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

/* Features Grid Container */
.pillars-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 15px;
    width: 100%;
}

/* Feature Row */
.pillars-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 15px;
    width: 100%;
}

/* Feature Card */
.feature-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 10px;
    flex: 1;
    min-height: 135px;
    background: #F6FBFF;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .feature-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 20px rgba(48, 158, 252, 0.2);
    }

/* Feature Card Content */
.feature-card-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    width: 100%;
}

/* Feature Icon Container */
.feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    position: relative;
    background: #F6FBFF;
    box-shadow: 3.33333px 1.33333px 10.6667px rgba(136, 165, 191, 0.78), inset 0px -0.666667px 0.666667px rgba(85, 102, 123, 0.4);
    border-radius: 6.66667px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove placeholder styles from feature-icon-svg */
.feature-icon-svg {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Easy to Use - Circle Check Icon */
.pillars-row:nth-child(1) .feature-card:nth-child(1) .feature-icon-svg {
    background-image: url('data:image/svg+xml,%3Csvg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 8.5C1 12.6421 4.35786 16 8.5 16C12.6421 16 16 12.6421 16 8.5C16 4.35786 12.6421 1 8.5 1C4.35786 1 1 4.35786 1 8.5Z" fill="%23309EFC" fill-opacity="0.2"/%3E%3Cpath d="M11 6.83333L7.66667 10.1667L6 8.5M8.5 16C4.35786 16 1 12.6421 1 8.5C1 4.35786 4.35786 1 8.5 1C12.6421 1 16 4.35786 16 8.5C16 12.6421 12.6421 16 8.5 16Z" stroke="%23309EFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* Transparency - Eye Icon */
.pillars-row:nth-child(1) .feature-card:nth-child(2) .feature-icon-svg {
    background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2.989 11.4823C4.47186 12.9565 7.05794 14.9999 10.0002 14.9999C12.9424 14.9999 15.528 12.9565 17.0108 11.4823C17.4019 11.0936 17.5981 10.8985 17.7226 10.5168C17.8115 10.2444 17.8115 9.75561 17.7226 9.48325C17.5981 9.10151 17.4019 8.90642 17.0108 8.51759C15.5279 7.0434 12.9424 5 10.0002 5C7.05794 5 4.47186 7.0434 2.989 8.51759C2.59761 8.90669 2.4019 9.10137 2.27733 9.48325C2.18848 9.75561 2.18848 10.2444 2.27733 10.5168C2.40191 10.8986 2.59761 11.0932 2.989 11.4823Z" fill="%23309EFC" fill-opacity="0.2"/%3E%3Cpath d="M8.33333 10C8.33333 10.9205 9.07953 11.6667 10 11.6667C10.9205 11.6667 11.6667 10.9205 11.6667 10C11.6667 9.07953 10.9205 8.33333 10 8.33333C9.07953 8.33333 8.33333 9.07953 8.33333 10Z" fill="%23309EFC" fill-opacity="0.2"/%3E%3Cpath d="M2.989 11.4823C4.47186 12.9565 7.05794 14.9999 10.0002 14.9999C12.9424 14.9999 15.528 12.9565 17.0108 11.4823C17.4019 11.0936 17.5981 10.8985 17.7226 10.5168C17.8115 10.2444 17.8115 9.75561 17.7226 9.48325C17.5981 9.10151 17.4019 8.90642 17.0108 8.51759C15.5279 7.0434 12.9424 5 10.0002 5C7.05794 5 4.47186 7.0434 2.989 8.51759C2.59761 8.90669 2.4019 9.10137 2.27733 9.48325C2.18848 9.75561 2.18848 10.2444 2.27733 10.5168C2.40191 10.8986 2.59761 11.0932 2.989 11.4823Z" stroke="%23309EFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M8.33333 10C8.33333 10.9205 9.07953 11.6667 10 11.6667C10.9205 11.6667 11.6667 10.9205 11.6667 10C11.6667 9.07953 10.9205 8.33333 10 8.33333C9.07953 8.33333 8.33333 9.07953 8.33333 10Z" stroke="%23309EFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* Data Security - Shield Check Icon */
.pillars-row:nth-child(2) .feature-card:nth-child(1) .feature-icon-svg {
    background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10.7715 17.1928C12.5267 16.3984 16.6667 13.9444 16.6667 8.47087V5.16409C16.6667 4.2325 16.6667 3.766 16.4852 3.40983C16.3254 3.09623 16.0698 2.84144 15.7562 2.68166C15.3997 2.5 14.9336 2.5 14.0002 2.5H6.0002C5.06678 2.5 4.59972 2.5 4.2432 2.68166C3.9296 2.84144 3.67482 3.09623 3.51503 3.40983C3.33337 3.76635 3.33337 4.23341 3.33337 5.16683V8.47087C3.33337 13.9444 7.47321 16.3984 9.22833 17.1928C9.4144 17.2771 9.50789 17.3191 9.71849 17.3552C9.85133 17.378 10.1496 17.378 10.2824 17.3552C10.4922 17.3192 10.5847 17.2773 10.7693 17.1938L10.7715 17.1928Z" fill="%23309EFC" fill-opacity="0.2"/%3E%3Cpath d="M12.5 7.5L9.16671 10.8333L7.50004 9.16667M16.6667 8.47087C16.6667 13.9444 12.5267 16.3984 10.7715 17.1928L10.7693 17.1938C10.5847 17.2773 10.4922 17.3192 10.2824 17.3552C10.1496 17.378 9.85133 17.378 9.71849 17.3552C9.50789 17.3191 9.4144 17.2771 9.22833 17.1928C7.4732 16.3984 3.33337 13.9444 3.33337 8.47087V5.16683C3.33337 4.23341 3.33337 3.76635 3.51503 3.40983C3.67482 3.09623 3.9296 2.84144 4.2432 2.68166C4.59972 2.5 5.06678 2.5 6.0002 2.5H14.0002C14.9336 2.5 15.3997 2.5 15.7562 2.68166C16.0698 2.84144 16.3254 3.09623 16.4852 3.40983C16.6667 3.766 16.6667 4.2325 16.6667 5.16409V8.47087Z" stroke="%23309EFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* User Controlled - Settings Icon */
.pillars-row:nth-child(2) .feature-card:nth-child(2) .feature-icon-svg {
    background-image: url('data:image/svg+xml,%3Csvg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.55086 16.6387L14.1011 14.0117C14.5868 13.7312 14.8292 13.591 15.0058 13.3948C15.1621 13.2212 15.2803 13.0168 15.3525 12.7947C15.4338 12.5442 15.4338 12.2643 15.4338 11.7061V6.44426C15.4338 5.886 15.4338 5.60614 15.3525 5.35568C15.2803 5.13354 15.1621 4.92893 15.0058 4.75536C14.83 4.56003 14.5881 4.4204 14.1066 4.14238L9.55005 1.51168C9.06431 1.23124 8.82193 1.0913 8.56372 1.03642C8.33526 0.98786 8.09906 0.98786 7.8706 1.03642C7.6124 1.0913 7.3692 1.23124 6.88346 1.51168L2.3324 4.13924C1.84723 4.41935 1.60483 4.5593 1.4283 4.75536C1.27202 4.92893 1.15399 5.13354 1.08182 5.35568C1.00024 5.60673 1.00024 5.88732 1.00024 6.4482V11.7023C1.00024 12.2632 1.00024 12.5436 1.08182 12.7947C1.15399 13.0168 1.27202 13.2212 1.4283 13.3948C1.60494 13.591 1.84751 13.7312 2.33325 14.0117L6.88346 16.6387C7.36919 16.9192 7.6124 17.0592 7.8706 17.1141C8.09906 17.1626 8.33526 17.1626 8.56372 17.1141C8.82192 17.0592 9.06513 16.9192 9.55086 16.6387Z" fill="%23309EFC" fill-opacity="0.2"/%3E%3Cpath d="M5.71704 9.07516C5.71704 10.4559 6.83633 11.5752 8.21704 11.5752C9.59775 11.5752 10.717 10.4559 10.717 9.07516C10.717 7.69445 9.59775 6.57516 8.21704 6.57516C6.83633 6.57516 5.71704 7.69445 5.71704 9.07516Z" fill="%23309EFC" fill-opacity="0.2"/%3E%3Cpath d="M9.55086 16.6387L14.1011 14.0117C14.5868 13.7312 14.8292 13.591 15.0058 13.3948C15.1621 13.2212 15.2803 13.0168 15.3525 12.7947C15.4338 12.5442 15.4338 12.2643 15.4338 11.7061V6.44426C15.4338 5.886 15.4338 5.60614 15.3525 5.35568C15.2803 5.13354 15.1621 4.92893 15.0058 4.75536C14.83 4.56003 14.5881 4.4204 14.1066 4.14238L9.55005 1.51168C9.06431 1.23124 8.82193 1.0913 8.56372 1.03642C8.33526 0.98786 8.09906 0.98786 7.8706 1.03642C7.6124 1.0913 7.3692 1.23124 6.88346 1.51168L2.3324 4.13924C1.84723 4.41935 1.60483 4.5593 1.4283 4.75536C1.27202 4.92893 1.15399 5.13354 1.08182 5.35568C1.00024 5.60673 1.00024 5.88732 1.00024 6.4482V11.7023C1.00024 12.2632 1.00024 12.5436 1.08182 12.7947C1.15399 13.0168 1.27202 13.2212 1.4283 13.3948C1.60494 13.591 1.84751 13.7312 2.33325 14.0117L6.88346 16.6387C7.36919 16.9192 7.6124 17.0592 7.8706 17.1141C8.09906 17.1626 8.33526 17.1626 8.56372 17.1141C8.82192 17.0592 9.06513 16.9192 9.55086 16.6387Z" stroke="%23309EFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M5.71704 9.07516C5.71704 10.4559 6.83633 11.5752 8.21704 11.5752C9.59775 11.5752 10.717 10.4559 10.717 9.07516C10.717 7.69445 9.59775 6.57516 8.21704 6.57516C6.83633 6.57516 5.71704 7.69445 5.71704 9.07516Z" stroke="%23309EFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* Feature Text Container */
.feature-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    flex: 1;
}

/* Feature Title */
.feature-title {
    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    color: #2C2C2C;
    margin: 0;
}

/* Feature Description */
.feature-description {
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .pillars-section {
        padding: 24px;
    }

    .pillars-title {
        font-size: 28px;
    }

    .pillars-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .pillars-section {
        padding: 20px;
    }

    .pillars-title {
        font-size: 24px;
    }

    .pillars-subtitle {
        font-size: 14px;
    }

    .pillars-row {
        flex-direction: column;
    }

    .feature-card {
        width: 100%;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pillars-section {
        padding: 16px;
    }

    .pillars-header {
        gap: 15px;
        margin-bottom: 20px;
    }

    .pillars-grid {
        gap: 12px;
    }

    .feature-card {
        padding: 15px;
    }

    .feature-card-content {
        gap: 15px;
    }

    .feature-icon {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }
}

/* Main Container for Carousel + Form */
.showcase-container {
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    text-align: left;
}

/* Left Side - Carousel */
.carousel-section {
    flex: 1;
    max-width: 544px;
}

/* Carousel Wrapper */
.carousel-wrapper {
    width: 100%;
}

/* Carousel Viewport */
.carousel-viewport {
    overflow: hidden;
    border-radius: 30px;
}

/* Carousel Track */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Individual Product Card */
.product-card {
    width: 544px;
    min-width: 544px;
    max-width: 544px;
    flex-shrink: 0;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 32px;
    min-height: 650px;
    box-sizing: border-box;
}

/* Card Content */
.card-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 480px;
}

/* Product Image */
.product-img {
    width: 250px;
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    opacity: 0.8;
    margin: auto;
    background: white;
    background-size: contain;
}

/* Product Details */
.product-details {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.product-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.product-title {
    width: 100%;
    max-width: 480px;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 130%;
    color: #2C2C2C;
    margin: 0;
    word-wrap: break-word;
}

.product-description {
    width: 100%;
    max-width: 480px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
    word-wrap: break-word;
}

/* Bottom Bar */
.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.status-text {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #2C2C2C;
}

/* Like Button */
.like-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #F6FBFF;
    box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    border-radius: 500px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

    .like-btn:hover {
        transform: translateY(-2px);
    }

    .like-btn.active {
        background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    }

.heart-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #309EFC;
    stroke-width: 2;
}

.like-btn.active .heart-icon {
    fill: #FFFFFF;
    stroke: #FFFFFF;
}

.like-number {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #2C2C2C;
}

.like-btn.active .like-number {
    color: #FFFFFF;
}

/* Navigation */
.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 33px;
}

.nav-btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

    .nav-btn:hover {
        transform: scale(1.05);
    }

    .nav-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .nav-btn.prev {
        background: radial-gradient(315% 315% at -124% -102%, #B9CCE2 11%, #FFFFFF 85%), #E3EDF7;
        box-shadow: -7px -4px 14px rgba(255, 255, 255, 0.6), 5px 4px 22px rgba(136, 165, 191, 0.36);
    }

    .nav-btn.next {
        background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    }

    .nav-btn svg {
        width: 20px;
        height: 20px;
        stroke-width: 2.5;
    }

    .nav-btn.prev svg {
        stroke: #000000;
    }

    .nav-btn.next svg {
        stroke: #FFFFFF;
    }

/* Carousel Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(48, 158, 252, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

    .dot.active {
        background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
        width: 30px;
        border-radius: 5px;
    }

    .dot:hover {
        background: rgba(48, 158, 252, 0.6);
    }

/* Right Side - Form Card */
.form-section {
    flex: 1;
    max-width: 544px;
}

.form-card {
    width: 100%;
    min-height: 657px;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 32px;
    box-sizing: border-box;
    filter: drop-shadow(0px 10px 15px rgba(16, 49, 68, 0.2));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .form-card:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Form Header */
.form-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.form-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #F6FBFF;
    box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    border-radius: 10px;
}

    .form-icon-box svg {
        width: 30px;
        height: 30px;
    }

.form-header-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-main-title {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 130%;
    color: #2C2C2C;
    margin: 0;
}

.form-subtitle {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
    margin: 0;
}

/* Form Content */
.form-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form Field */
.form-field {
    display: flex;
    flex-direction: column;
}

.form-label {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
}

.form-input {
    width: 100%;
    padding: 20px;
    background: #F0F8FF;
    border: 1px solid rgba(14, 28, 41, 0.1);
    border-radius: 10px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

    .form-input:focus {
        outline: none;
        border-color: #309EFC;
    }

    .form-input::placeholder {
        color: rgba(44, 44, 44, 0.4);
    }

.form-textarea {
    min-height: 90px;
    resize: vertical;
}

/* Form Row */
.form-row {
    display: flex;
    gap: 20px;
}

.form-field-half {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* File Upload */
.file-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-label {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
}

.file-icon {
    width: 20px;
    height: 20px;
}

    .file-icon svg {
        width: 100%;
        height: 100%;
    }

/* Submit Button */
.form-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    width: 100%;
    height: 53px;
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    border-radius: 1000px;
    border: none;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .form-submit:hover {
        transform: translateY(-2px);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 4px 8px 50px rgba(29, 187, 241, 0.7);
    }

    .form-submit:active {
        transform: translateY(0);
    }

/* Responsive */
@media (max-width: 1200px) {
    .showcase-container {
        flex-direction: column;
        align-items: center;
    }

    .carousel-section,
    .form-section {
        max-width: 544px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .carousel-section,
    .form-section {
        max-width: 100%;
    }

    .product-card {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 24px;
    }

    .card-content {
        max-width: 100%;
    }

    .product-title,
    .product-description {
        max-width: 100%;
    }

    .product-img {
        width: 250px;
        height: 250px;
    }

    .product-title {
        font-size: 20px;
    }

    .product-description {
        font-size: 16px;
    }

    .form-card {
        padding: 24px;
    }

    .form-row {
        flex-direction: column;
    }
}

/* Toggle Container */
.toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

.toggle-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.toggle-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
    white-space: nowrap;
}

.toggle-label-start {
    text-align: center;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
    min-width: 60px;
    background: rgb(229, 187, 250);
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* When checkbox is checked */
.toggle-switch input:checked ~ .toggle-knob {
    transform: translateX(30px);
}

/* Change background when checked */
.toggle-switch:has(input:checked) {
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
}

/* Larger touch target for mobile */
.toggle-switch::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

/* Tablet and larger screens */
@media (min-width: 768px) {
    .toggle-container {
        flex-direction: row;
        gap: 8px;
    }

    .toggle-label-start {
        text-align: left;
    }
}

/* Small mobile screens */
@media (max-width: 360px) {
    .toggle-label {
        font-size: 13px;
    }

    .toggle-wrapper {
        gap: 6px;
    }
}

/* Improve accessibility - focus state */
.toggle-switch:focus-within {
    outline: 2px solid #309EFC;
    outline-offset: 2px;
}

/* Large Container Component */
.large-container {
    width: 100%;
    max-width: 1240px;
    padding: 80px 0px;
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    margin: 150px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .large-container:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Responsive */
@media (max-width: 1280px) {
    .large-container {
        width: 95%;
        height: auto;
        min-height: 1015px;
    }
}

@media (max-width: 768px) {
    .large-container {
        width: 100%;
        padding: 24px;
        min-height: 800px;
    }
}

/* Feature Cards Grid Container */
.features-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 40px 30px;
    gap: 32px;
    width: 100%;
    margin: 0 auto;
}

/* Feature Card - Standard Size */
.feature-card-standard {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 30px;
    gap: 10px;
    width: calc((100% - 64px) / 3); /* 3 columns with gaps */
    min-width: 300px;
    height: 353px;
    background: #F6FBFF;
    box-shadow: 0px 10px 15px rgba(16, 49, 68, 0.2);
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .feature-card-standard:hover {
        transform: translateY(-5px);
        box-shadow: 0px 15px 25px rgba(16, 49, 68, 0.3);
    }

/* Feature Card - Wide Size */
.feature-card-wide {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 30px;
    gap: 10px;
    width: calc((100% - 32px) / 2); /* 2 columns with gap */
    min-width: 300px;
    height: 264px;
    background: #F6FBFF;
    box-shadow: 0px 10px 15px rgba(16, 49, 68, 0.2);
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .feature-card-wide:hover {
        transform: translateY(-5px);
        box-shadow: 0px 15px 25px rgba(16, 49, 68, 0.3);
    }

/* Card Content Container */
.feature-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 25px;
    width: 100%;
    height: 100%;
}

/* Icon Box */
.feature-icon-box {
    width: 60px;
    height: 60px;
    position: relative;
    background: #F6FBFF;
    box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .feature-icon-box svg {
        width: 30px;
        height: 30px;
    }

/* Card Text Container */
.feature-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    width: 100%;
    flex: 1;
}

/* Card Title */
.feature-card-title {
    width: 100%;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 130%;
    color: #2C2C2C;
    margin: 0;
}

/* Card Description */
.feature-card-description {
    width: 100%;
    font-family: 'Inter', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .features-grid {
        max-width: 100%;
        justify-content: center;
    }

    .feature-card-standard {
        width: calc((100% - 32px) / 2); /* 2 columns */
    }

    .feature-card-wide {
        width: 100%; /* Full width */
    }
}

@media (max-width: 768px) {
    .features-grid {
        gap: 20px;
    }

    .feature-card-standard,
    .feature-card-wide {
        width: 100%; /* Full width, single column */
        height: auto;
        min-height: 280px;
        padding: 30px 24px;
        min-width: unset;
    }

    .feature-card-title {
        font-size: 20px;
    }

    .feature-card-description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .features-grid {
        gap: 16px;
    }

    .feature-card-standard,
    .feature-card-wide {
        padding: 24px 20px;
        min-height: 260px;
    }

    .feature-icon-box {
        width: 50px;
        height: 50px;
    }

        .feature-icon-box svg {
            width: 25px;
            height: 25px;
        }

    .feature-card-title {
        font-size: 18px;
    }

    .feature-card-description {
        font-size: 12px;
    }
}

/* CTA Section Container */
.cta-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0px;
    gap: 32px;
    width: 100%;
    max-width: 1120px;
    margin: 100px auto;
}

/* Left Side - Text Content */
.cta-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 30px;
    width: 544px;
    flex: none;
}

.cta-title {
    width: 100%;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 55px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
    margin: 0;
}

.cta-description {
    width: 100%;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

.cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    gap: 8px;
    width: 279px;
    height: 53px;
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    border-radius: 1000px;
    border: none;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .cta-button:hover {
        transform: translateY(-2px);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 4px 8px 50px rgba(29, 187, 241, 0.7);
    }

    .cta-button:active {
        transform: translateY(0);
    }

/* Right Side - Image Card */
.cta-image-container {
    width: 544px;
    height: 691px;
    position: relative;
    flex: none;
}

.cta-image-card {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .cta-image-card:hover {
        transform: translateY(-5px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

.cta-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Responsive */
@media (max-width: 1200px) {
    .cta-section {
        flex-direction: column;
        gap: 40px;
    }

    .cta-content,
    .cta-image-container {
        width: 100%;
        max-width: 544px;
    }
}

@media (max-width: 768px) {
    .cta-content {
        max-width: 100%;
    }

    .cta-title {
        font-size: 36px;
    }

    .cta-description {
        font-size: 16px;
    }

    .cta-button {
        width: 100%;
        max-width: 279px;
    }

    .cta-image-container {
        max-width: 100%;
        height: 500px;
    }

        .cta-image-container svg {
            width: 100%;
            height: 500px;
        }

    .cta-image-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .cta-image-container {
        height: 400px;
    }
}

/* Contact Section Container */
.contact-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0px;
    gap: 32px;
    width: 100%;
    max-width: 928px;
    margin: 0 auto;
}

/* Left Side - Contact Info Cards */
.contact-info-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 448px;
    flex: none;
}

/* Contact Info Card */
.contact-info-card {
    width: 100%;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 25px;
    box-sizing: border-box;
    filter: drop-shadow(0px 10px 15px rgba(16, 49, 68, 0.2));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .contact-info-card:hover {
        transform: translateY(-3px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Card Content */
.contact-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card Header */
.contact-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

/* Icon Box */
.contact-icon-box {
    width: 50px;
    height: 50px;
    background: #F6FBFF;
    box-shadow: 4.16667px 1.66667px 13.3333px rgba(136, 165, 191, 0.78), inset 0px -0.833333px 0.833333px rgba(85, 102, 123, 0.4);
    border-radius: 8.33333px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .contact-icon-box svg {
        width: 24px;
        height: 24px;
    }

/* Card Title */
.contact-card-title {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 130%;
    color: #2C2C2C;
    margin: 0;
    flex: 1;
}

/* Card Description */
.contact-card-description {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    margin: 0;
}

/* Card Link */
.contact-card-link {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    text-decoration: underline;
    color: #2C2C2C;
    margin-top: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .contact-card-link:hover {
        color: #309EFC;
    }

/* Right Side - Contact Form Card */
.contact-form-column {
    width: 448px;
    flex: none;
}

.contact-form-card {
    width: 100%;
    min-height: 614px;
    background: linear-gradient(210.55deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
    box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.8), 16px 4px 64px rgba(18, 61, 101, 0.3), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 40px 30px;
    box-sizing: border-box;
    filter: drop-shadow(0px 10px 15px rgba(16, 49, 68, 0.2));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .contact-form-card:hover {
        transform: translateY(-3px);
        box-shadow: -16px -16px 40px rgba(255, 255, 255, 0.9), 16px 8px 80px rgba(18, 61, 101, 0.4), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
    }

/* Form Header */
.contact-form-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.contact-form-icon-box {
    width: 60px;
    height: 60px;
    background: #F6FBFF;
    box-shadow: 5px 2px 16px rgba(136, 165, 191, 0.78), inset 0px -1px 1px rgba(85, 102, 123, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .contact-form-icon-box svg {
        width: 30px;
        height: 30px;
    }

.contact-form-title {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 130%;
    text-align: center;
    color: #2C2C2C;
    margin: 0;
}

/* Form Fields */
.contact-form-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form-label {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #2C2C2C;
}

.contact-form-input {
    width: 100%;
    padding: 20px;
    background: #F0F8FF;
    border: 1px solid rgba(14, 28, 41, 0.1);
    border-radius: 10px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: rgba(44, 44, 44, 0.6);
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

    .contact-form-input:focus {
        outline: none;
        border-color: #309EFC;
    }

    .contact-form-input::placeholder {
        color: rgba(44, 44, 44, 0.4);
    }

.contact-form-textarea {
    min-height: 90px;
    resize: vertical;
}

/* Submit Button */
.contact-submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    width: 100%;
    height: 53px;
    background: linear-gradient(69.08deg, #0ED2E7 2.63%, #309EFC 132.25%);
    box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.6), 4px 6px 40px rgba(29, 187, 241, 0.5);
    border-radius: 1000px;
    border: none;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

    .contact-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 4px 8px 50px rgba(29, 187, 241, 0.7);
    }

    .contact-submit-btn:active {
        transform: translateY(0);
    }

/* Responsive */
@media (max-width: 1024px) {
    .contact-section {
        flex-direction: column;
        align-items: center;
        max-width: 448px;
    }

    .contact-info-column,
    .contact-form-column {
        width: 100%;
        max-width: 448px;
    }
}

@media (max-width: 768px) {
    .contact-info-column,
    .contact-form-column {
        max-width: 100%;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 20px;
    }

    .contact-card-title,
    .contact-form-title {
        font-size: 18px;
    }

    .contact-card-description,
    .contact-form-input {
        font-size: 14px;
    }
}