/* ###################################### */
/* Global */
@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(./assets/font/Geist_Mono.woff2)format("woff2");
    unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(./assets/font/Geist_Mono.woff2)format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(./assets/font/Geist_Mono.woff2)format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Geist Mono Fallback;
    src: local(Arial);
    ascent-override: 74.67%;
    descent-override: 21.92%;
    line-gap-override: 0.0%;
    size-adjust: 134.59%
}

.geist_mono {
    font-family: Geist Mono, Geist Mono Fallback;
    font-style: normal
}

@font-face {
    font-family: inter;
    src: url(./assets/font/InterVariable.ttf)format("truetype");
    font-display: swap
}

@font-face {
    font-family: inter Fallback;
    src: local(Arial);
    ascent-override: 89.79%;
    descent-override: 22.36%;
    line-gap-override: 0.0%;
    size-adjust: 107.89%
}

.inter {
    font-family: inter, inter Fallback
}

:root {
    --color-background-main: #08090a;
    --color-background-invert: #ffffff;
    --color-text-main: #ffffff;
    --color-text-invert: #08090a;
    --color-text-soft: #ffffffb3;
    --color-text-sub: #ffffff99;
    --color-border-sub: #08090a12;
    --color-background-soft: #08090a08;
    --color-border-surface: #ffffff0d;
    --color-muted: #838484;
    --color-border-soft: #ffffff26;
    --color-brand: #2ce19a;
    --color-brand-light: #188b5f;
    --color-border-solid: #ffffff;
    --color-muted-invert: #08090a80;
    --color-dropdown-hover: #f7f7f7;
    --color-header-sales: #ffffff0d;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}

html {
    font-family: inter, inter Fallback, system-ui, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
    tab-size: 4;
    font-family: inherit;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
    scrollbar-gutter: stable
}

code,
pre,
.mono {
    font-family: "Geist Mono", "Geist Mono Fallback", monospace;
}

b,
strong {
    font-weight: bolder
}

/* ###################################### */
/* Header with logo, nav and cta */
header {
    /* position: relative; */
    z-index: 40;
    width: 100%;
    height: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* padding-left: 1.5rem; */
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    /* margin-bottom: 10px; */
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    inset: 0;
    width: 100%;
    /* list-style-type: none; */
}

.header-blur {
    background: transparent;
    backdrop-filter: blur(16px);
}

.header-logo {
    margin-top: .25rem;
}

.header-full {
    display: flex;
    font-size: 15px;
    flex: 1;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    margin-inline: auto;
    column-gap: 2rem;
    padding-bottom: 1rem;
    width: 100%;
    max-width: 66rem;
}

.header-nav {
    padding-left: 150px;
    font-size: 15px;
    /* margin-left: 200px; */
}

.header-nav-ul {
    list-style-type: none;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* margin-bottom: 20px; */
}

.header-nav-ul-li {
    border-radius: 999px;
    color: var(--color-brand-light);
}

.header-nav-ul-a {
    display: inline-flex;
    height: 2rem;
    width: max-content;
    align-items: center;
    outline-offset: 2px;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    /* border-radius: 999px; */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    cursor: pointer;
    font-weight: 500;
    line-height: 150%;
    color: var(--color-text-main);
    color: #000
        /* border: 2px solid red; */

}

.header-nav-ul-a:focus-visible {
    outline-width: 2px;
    font-size: 15px;
}

.header-nav-ul-a:hover {
    background-color: var(--color-background-soft);
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
}


[data-state="open"] {
    background-color: var(--color-background-soft);
}

/* DROPDOWN STYLES START*/
/* TODO: fix padding around drop down elements */
/* TODO: make the p inside li clickable for links */
.dropdown-content {
    display: none;
    position: absolute;
    font-size: 15px;
    font-weight: bold;
    padding-block: .25rem;
    padding-inline: 0.75rem;
    width: max-content;
    z-index: 50;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: bold;
    color: var(--color-text-invert);
    /* padding-top: 0.5rem; */
    padding-bottom: 0.5rem;
}

.dropdown-content .header-dropdown-item:hover {
    background-color: var(--color-dropdown-hover);
    border-radius: .5rem;
}

.dropdown:hover .dropdown-content {
    display: flex;
    gap: 2rem;
    background-color: #ffffff;
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border-radius: 1.5rem;
    animation-duration: .3s;
    font-size: 15px;
    font-weight: bold;
}

.vertical-nav-items {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
}

.header-dropdown-caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 500;
}

/* 
.header-dropdown-item{
    display: inline-flex;
    flex-direction: row;
    line-height: 150%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    row-gap: 200px;
    margin: auto;
    height: auto;
    width: auto;
} */
.header-dropdown-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    padding-block: .25rem;
    padding-inline: .75rem;
    justify-items: stretch;
    align-items: center;
    line-height: 150%;
}

.header-dropdown-svg {
    user-select: none;
    width: 1rem;
    height: 1rem;
    color: var(--color-text-invert);
    grid-column: 1;
    grid-row: 1;
}

.header-dropdown-anchor {
    grid-column: 2;
    grid-row: 1;
    justify-content: left;
}

.header-dropdown-para {
    color: var(--color-muted);
    grid-column: 1 / -1;
    user-select: none;
}

/* DROPDOWN STYLES END*/
/* CTA buttons header */
.header-cta-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.header-cta {
    /* color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.5rem;
    font-size: 15px;
}

.header-cta-a {
    display: inline-flex;
    align-items: center;
    outline-offset: 2px;
    height: fit-content;
    cursor: pointer;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 999px;
    font-weight: 500;
    flex-shrink: 0;
    transition-duration: 100ms;
    /* border: 1px solid #fff; */
    /* border-width: 1px; */
    justify-content: center;
    outline-offset: 2px;
    padding-top: 4.5px;
    padding-bottom: 4.5px;
    padding-inline: 12.75px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.header-cta-a:focus-visible {
    /* outline-width: 2px; */
    outline: 2px solid var(--color-brand-light);
}

.header-cta-a:focus-visible {
    outline-color: var(--color-brand-light);
    outline-width: 2px;
    outline-style: solid;
    outline-offset: 2px;
}

.header-cta-a-sales {
    background-color: var(--color-header-sales);
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    color: #000;
}

.header-cta-a-signup {
    background-color: var(--color-text-main);
    color: var(--color-background-main);
    transition: none;
}

.header-cta-a-signup:hover {
    background-color: var(--color-text-soft);
    color: var(--color-background-main);
}

/* ###################################### */
/* Background and hero image section */
/* .hero-section {
    border: 5px solid green;
    margin: 0px;
    padding: 0px;
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 70vh;
    height: 100vh;
    width: 100%;
    justify-content: center;
    position: absolute;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
} */

#hero-bg {
    background-image: url(./assets/img/bg-light.svg);
    /* border: 5px solid red; */
    z-index: -10;
    padding: 0%;
    margin: 0%;
    background-position: 50%;
    /* background-position: center; */
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 100vh; */
    height: 1157.030px;
    min-width: 100%;
    /* min-height: 100vh; */
    position: absolute;
    display: block;
    /* object-fit: cover; */
    user-select: none;
    top: -93px;
    left: 0%;
    bottom: 160px;
    right: 0%;
    -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .99) 18.5%, rgba(0, 0, 0, .953) 34.3%, rgba(0, 0, 0, .894) 47.6%, rgba(0, 0, 0, .824) 58.5%, rgba(0, 0, 0, .74) 67.5%, rgba(0, 0, 0, .647) 74.7%, rgba(0, 0, 0, .55) 80.3%, rgba(0, 0, 0, .45) 84.7%, rgba(0, 0, 0, .353) 88%, rgba(0, 0, 0, .26) 90.5%, rgba(0, 0, 0, .176) 92.5%, rgba(0, 0, 0, .106) 94.2%, rgba(0, 0, 0, .047) 95.9%, rgba(0, 0, 0, .01) 97.7%, transparent 100%);
    mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .99) 18.5%, rgba(0, 0, 0, .953) 34.3%, rgba(0, 0, 0, .894) 47.6%, rgba(0, 0, 0, .824) 58.5%, rgba(0, 0, 0, .74) 67.5%, rgba(0, 0, 0, .647) 74.7%, rgba(0, 0, 0, .55) 80.3%, rgba(0, 0, 0, .45) 84.7%, rgba(0, 0, 0, .353) 88%, rgba(0, 0, 0, .26) 90.5%, rgba(0, 0, 0, .176) 92.5%, rgba(0, 0, 0, .106) 94.2%, rgba(0, 0, 0, .047) 95.9%, rgba(0, 0, 0, .01) 97.7%, transparent 100%);
}

.blog-cta-button {
    background-color: #08090a26;
    color: #fff;
    position: absolute;
    display: flex;
    align-items: center;
    background-color: var(--color-background-soft);
    /* background-color: #08090a26; */
    backdrop-filter: blur(12px);
    padding-left: 0.25rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    /* padding-block: .25rem; */
    gap: 0.625rem;
    border-radius: 60px;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    top: 95px;
    width: fit-content;
    border: 0;
    font-display: swap;
    line-height: 1.5;
}

.blog-cta-button:hover {
    background-color: var(--color-border-sub);
}

.blog-cta-new-green {
    text-transform: uppercase;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    /* padding-inline: .25rem;
    padding-block: .25rem; */
    border-radius: 1.5rem;
    background-color: var(--color-brand-light);
    color: #ffffff;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0px 2px 4px 0px var(--color-background-soft);
}

.blog-cta-para {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.5;
    /* word-spacing: ; */
}

.blog-cta-arrow-svg {
    user-select: none;
    color: #fff;
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
    justify-content: center;
    flex-shrink: 0;
}


.heading-container {
    z-index: 50;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    /* align-items: center baseline ; */
    margin-top: 1.8%;

}

.heading {
    z-index: 20;
    display: flex;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 43rem;
    text-align: center;
    color: var(--color-text-main);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
    letter-spacing: -.02em;
    font-size: 68px;
    font-size: max(2.5rem, min(4vw, 4rem));
    margin-inline: auto;
    /* margin-top: 4.8%; */
}

.para-desc {
    display: flex;
    color: #fff;
    max-width: 29.5rem;
    justify-content: center;
    align-content: center;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.5;
    /* align-self: flex-end safe; */
    /* margin-inline: auto; */
    margin-top: -30px;
}

.heading-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 22.5rem;
    gap: 0.375rem;
    border-radius: 999px;
    margin-top: 2rem;
    padding: 0.25rem;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-border-soft);
    backdrop-filter: blur(12px);
    background-color: var(--color-border-soft);
}

.heading-form-input {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    height: 2rem;
    outline: none;
    width: 100%;
    color: var(--color-text-main);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    border: none;
    border-radius: 999px;
    background: none;
    /* color: transparent; */
    /* opacity: 0; */
}

::placeholder {
    color: #ffffff80;
    opacity: 1;
}

.heading-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: fit-content;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    outline-offset: 2px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 999px;
    padding-top: 4.5px;
    padding-bottom: 4.5px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--color-background-invert);
    color: var(--color-text-invert);
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-background-invert);
    transition-property: color, background-color;
    transition-duration: 100ms;
}

.heading-form-button:hover {
    opacity: 0.85;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-background-invert);
}

.heading-form-button:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-brand);
}

#hero-image {
    /* background-image: url(./assets/img/hero-image-light.svg); */
    user-select: none;
    /* border: 5px solid blue; */
    z-index: 10;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    margin: 22% auto;
    padding: 0px;
    background-position: 100%;
    background-repeat: no-repeat;
    /* height: auto; */
    /* width: 100%; */
    justify-content: center;
    align-items: center;
    top: 9.2rem;
    /* top: 0; */
    bottom: 0;
    left: 0;
    right: 0;
    isolation: isolate;
    background-position-x: 50%;
    background-position-y: 60%;
    border-width: 3px;
    /* border-style: solid; */
    border-radius: 1.5rem;
    overflow-clip-margin: content-box;
    overflow: clip;
    max-width: 67.5rem;
    /* max-width: 67.5rem; */
}

/* trusted by company section */

.company-logos-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    padding-top: 6rem;
    padding-bottom: 6rem;
    /* border: 2px solid red; */
}

.company-logos-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: 1.75rem;
    max-width: 64rem;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    /* border: 2px solid blue; */
    margin: auto;
    padding: auto;
    margin-top: 40%;
}

.company-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 100%;
    /* border: 2px solid green; */
    background-repeat: no-repeat;
    background-position: center;
}

.company-logos-svg {
    width: 100%;
    height: 68px;
    width: auto;

}

#company-logos-svg-anthropic {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/anthropic-logo.svg);
    width: 130;
    height: 20;
    fill: none;
    /* color: #000; */
    /* vertical-align: middle; */
    display: block;
}

#company-logos-svg-coinbase {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/coinbase-logo.svg);
}

#company-logos-svg-ms {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/ms-logo.svg);
}

#company-logos-svg-perplexity {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/perplexity-logo.svg);
}

#company-logos-svg-hubspot {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/hubspot-logo.svg);
}

#company-logos-svg-x {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/x-logo.svg);
}

#company-logos-svg-paypal {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/paypal-logo.svg);
}

#company-logos-svg-lovable {
    /* border: 5px solid orange; */
    background-image: url(./assets/company-logos/lovable-logo.svg);
}

/* Feature highligh section */


.feat-high {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
    margin-bottom: 9rem;
}

.feat-high-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    width: 100%;
    gap: 1rem;
}

.feat-high-text-h1 {
    font-weight: 600;
    font-size: 2.5rem;
}

.feat-high-text-para {
    max-width: 40.5rem;
    text-align: center;
    color: #393A3B;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.feat-high-visual-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.feat-high-visual-two-columns {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.two-columns {
    border-radius: 1.5rem;
    border: 1px solid var(--color-border-sub);
    padding: 0.375rem;
    width: auto;
    flex: 1;
}

.column-text-area {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.small-top-left-para {
    color: var(--color-brand-light);
    font-family: Geist Mono, Geist Mono Fallback, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.top-left-heading {
    font-weight: 500;
    line-height: 1.3;
    color: #000;
    font-size: 1.5rem;
    letter-spacing: -0.24px;
}

.descriptive-feat-para {
    color: #393A3B;
    font-size: 1rem;
    line-height: 1.5;
    text-wrap: balance;
}

.visual-svg {
    width: 100%;
    height: 20rem;
    position: relative;
    isolation: isolate;
    user-select: none;
    background-repeat: no-repeat;
    background-position: center;
}

#column-1 {
    background-image: url(./assets/img/column-1-img.jpg);
    border: none;
    /* border-radius: 90px; */
}

#column-2 {
    background-image: url(./assets/img/column-2-img.jpg);
    border: none;
    /* border-radius: 90px; */
}

#bottom-image {
    background-image: url(./assets/img/row-bottom-img.jpg);
    border: none;
    width: 100%;
    height: 30rem;
    /* height: 100%; */
    position: relative;
    isolation: isolate;
    user-select: none;
    background-repeat: no-repeat;
    background-position: center;
}

.feat-high-visual-single-bottom {
    width: 100%;
    border-radius: 1.5rem;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-border-sub);
}

.single-bottom-text-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin: 0.375rem;
    margin-bottom: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.single-bottom-para {
    color: var(--color-brand-light);
    font-family: "Geist Mono", "Geist Mono Fallback", monospace;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-wrap: balance;
}

.single-bottom-heading {
    text-align: center;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-main);
    font-size: 1.5rem;
    letter-spacing: -0.24px;
    color: #000;
}

.single-bottom-descriptive-para {
    color: #393A3B;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    max-width: 40rem;
    text-wrap: balance;
}

/* Enterprise feat section */

.enterprise-features {
    background-color: var(--color-background-soft);
    width: 100%;
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.ente-feat-container {
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.ente-feat-heading-cta {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 3rem;
    flex-direction: row;
}

.ente-feat-text-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40rem;
}

.ente-feat-title {
    color: var(--color-brand-light);
    font-family: Geist Mono, Geist Mono Fallback, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: left;

}

.ente-feat-heading {
    text-align: left;
    font-size: 42.5px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.02em;
}

.ente-feat-descriptive {
    text-align: center;
    text-wrap: balance;
    font-weight: 400;
    color: #393A3B;
}

.ente-feat-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    gap: 0.375rem;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 500;
    outline-offset: 2px;
    flex-shrink: 0;
    transition-property: color, background-color;
    transition-duration: 100ms;
    color: var(--color-background-invert);
    background-color: var(--color-text-invert);
    border: 1px solid var(--color-background-invert);
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
    margin-right: 0.25rem;
    margin-top: auto;
    align-self: flex-end;
}

.ente-feat-cta:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-brand-light);
}

.ente-feat-cta:hover {
    background-color: #08090ab6;
}

/* .column-1,
.column-2 {
    display: flex;
    flex: 1;
    justify-content: space-between;
    width: auto;
} */

.ente-feat-2-column-container {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 3rem;
    padding-bottom: 3rem;
    flex-direction: row;
    /* flex: 1; */
    /* justify-content: space-evenly; */
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    /* padding-left: auto; */
    /* margin-left: 20px;
    margin-right: auto;
    padding-left: 500px;
    padding-right: 500px; */
    /* justify-content: space-evenly; */
}

.column-icon-div {
    flex-shrink: 0;
    user-select: none;
    width: 2rem;
    height: 2rem;
    color: var(--color-brand-light);
}

#column-1-icon {
    background-image: url(./assets/img/ente-feat-column-1.svg);
}

#column-2-icon {
    background-image: url(./assets/img/ente-feat-column-2.svg);
}

.column-heading {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #000;
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.column-description {
    color: #393A3B;
}

.brand-showcase-slide {
    width: 100%;
    /* overflow: hidden; */
}

.showcase-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
    /* width: 100vw; */
    /* height: 100vh; */
    overflow: hidden;
}

.showcase-image {
    background-image: url(./assets/slide/ente-slide-anthropic.png);
    /* max-width: 48rem; */
    margin: auto;
    height: 518px;
    width: 1088px;
    /* width: 100%; */
    position: relative;
    isolation: isolate;
    user-select: none;
    background-repeat: no-repeat;
    background-position: center;
    /* border: 2px solid red; */
    border-radius: 1.5rem;
    /* object-fit: contain; */
    background-size: 100% 100%;
}

.showcase-image:hover {
    filter: brightness(80%);
    transition: all 0.2s ease;
}

.brand-logo-footer {
    position: relative;
    /* z-index: 99999; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* bottom: -10px; */
    min-width: 0;
    overflow: clip;
    /* margin-top: 27%; */
    /* margin-bottom: 100px; */
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --mask-left: black 0px;
    --mask-right: black 100%;
    mask-image: linear-gradient(to right,
            var(--mask-left),
            black,
            var(--mask-right));
}

/* 
.brand-scrollbar {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    display: none;
} */

.brand-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    width: max-content;
    min-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.brand-button {
    /* color: black; */
    display: flex;
    cursor: pointer;
    transition-property: filter, opacity;
    transition-duration: 300ms;
    height: 4rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    outline: none;
    border-radius: 0.125rem;
    border: 0;
    /* border: 2px solid red; */
    background-color: transparent;
    width: 130px;
    /* width: 100%; */
    /* background-repeat: no-repeat;
    background-position: center; */
    /* padding-top: 0; */
    /* padding-bottom: 0; */
}

.button-image-svg {
    border-radius: 0.125rem;
    height: 8rem;
    width: 100%;
    min-width: 0;
    /* border: 2px solid red; */
    filter: grayscale(100%);
}

.brand-button:focus-visible .button-image-svg {
    outline-offset: 4px;
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-brand-light);
}

.case-studies {
    width: 100%;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    overflow: hidden;
}

.case-text-area {
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.case-text-title {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-brand-light);
}

.case-text-heading {
    text-align: center;
    --tw-leading: 110%;
    --tw-font-weight: var(--font-weight-semibold);
    line-height: 110%;
    font-weight: var(--font-weight-semibold);
    color: #000;
    letter-spacing: -.02em;
    font-size: max(1.75rem, min(4vw, 2.5rem));
}

.case-text-para {
    text-align: center;
    color: #393A3B;
    font-size: 1rem;
    line-height: 1.5rem;
    max-width: 40rem;
}

.case-studies-carousel {
    position: relative;
    width: 100%;
    padding-left: 18%;
    padding-right: 18%;
}

.carousel-content {
    overflow: visible;
    display: flex;
    margin-left: -1rem;
}

.carousel-item {
    min-width: 0;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%;
    padding-left: 1rem;
    max-width: 410px;
}

.carousel-item>a {
    /* border: 2px solid red; */
    width: 100%;
    outline: none;
}

.carousel-image-div {
    width: 100%;
    border-radius: 1rem;
    /* overflow: hidden; */
    position: relative;
    margin-bottom: 0.5rem;
    /* height: 290px; */
}

.carousel-brand-bg {
    /* border: 2px solid red; */
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.2);
}

.svg-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #ffffff !important;
    color: #ffffff !important;
    height: 45px;
    width: 230px;
}

.carousel-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.carousel-para {
    color: #393A3B;
    font-size: 1rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.read-story-span {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-muted);
    border-radius: 0.125rem;
    cursor: pointer;
}

.read-story-span:hover {
    color: var(--color-brand-light);
}

.read-story-svg {
    flex-shrink: 0;
    width: 10px;
    height: 20px;
    transform: rotate(-90deg);
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    user-select: none;
}

/* no need to change color kyuki svg hi static hai ;) */
.read-story-span:hover .read-story-svg {
    /* color: var(--color-brand-light); */
    transform: rotate(-90deg) translateY(0.125rem);
}

.carousel-slider-arrows {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding-top: 3rem;
}

.arrow-prev {
    /* background-color: transparent !important; */
    /* border-color: transparent !important; */
    opacity: 0.5;
    pointer-events: none;
}

.carousel-arrows {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-main);
    border: 1px solid transparent;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition-property: color, background-color;
    transition-duration: 100ms;
    outline-offset: 2px;
    position: relative;
    width: 2.375rem;
    height: 2.375rem;
    top: 0;
    left: 0;
    padding: 0;
}

.carousel-arrows:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-brand-light);
}

.carousel-arrows:disabled {
    opacity: 0.5;
    pointer-events: none;
}


.carousel-arrows:hover>svg {
    color: rgba(255, 255, 255, 0.8);
}

.carousel-arrows:active {
    transform: scale(0.96);
}

.final-cta-section {
    position: relative;
    width: 100%;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.cta-gradient {
    position: absolute;
    inset: 0;
    z-index: 10;
    transform: rotate(180deg);
    pointer-events: none;
    background: linear-gradient(#f7f7f7 0%, rgba(247, 247, 247, .95) 4.7%, rgba(247, 247, 247, .89) 8.8%, rgba(247, 247, 247, .827) 12.6%, rgba(247, 247, 247, .76) 16.3%, rgba(247, 247, 247, .69) 19.9%, rgba(247, 247, 247, .616) 23.8%, rgba(247, 247, 247, .54) 28.1%, rgba(247, 247, 247, .467) 33%, rgba(247, 247, 247, .392) 38.7%, rgba(247, 247, 247, .318) 45.4%, rgba(247, 247, 247, .243) 53.2%, rgba(247, 247, 247, .176) 62.4%, rgba(247, 247, 247, .114) 73.2%, rgba(247, 247, 247, .055) 85.6%, rgba(247, 247, 247, 0) 100%);
}

.cta-bg {
    position: absolute;
    inset: 0;
    z-index: 9;
    background: #fff;
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 20;
    max-width: 988px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.last-cta-heading-main {
    color: var(--text-main);
    font-size: 40px;
    text-align: center;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.8px;
    max-width: 560px;
    /* border: 2px solid red; */
}

.last-cta-para {
    color: var(--text-main);
    font-size: 1rem;
    line-height: 150%;
    margin-top: 1rem;
    text-align: center;
    max-width: 560px;
    text-wrap: balance;
}

.last-cta-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.last-cta-button-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    outline-offset: 2px;
    cursor: pointer;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 500;
    flex-shrink: 0;
    transition-property: color, background-color;
    transition-duration: 100ms;
    background-color: #000;
    color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    font-size: 1rem;
    line-height: 150%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
    box-shadow: var(--shadow-button-sm);
}

.last-cta-button-signup:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-brand-light);
}

.last-cta-button-signup:hover {
    background-color: color-mix(in srgb, #000 85%, transparent);
}

.last-cta-button-signup svg {
    pointer-events: none;
}

.last-cta-button-signup svg:not([class*="size-"]) {
    width: 0.75rem;
    height: 0.75rem;
}

.last-cta-button-sales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    outline-offset: 2px;
    cursor: pointer;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 500;
    flex-shrink: 0;
    transition-property: color, background-color;
    transition-duration: 100ms;
    background-color: #fff;
    color: #08090a;
    border-width: 1px;
    border-style: solid;
    border-color: #08090a26;
    font-size: 1rem;
    line-height: 150%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
}

.last-cta-button-sales:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-brand-light);
}

.last-cta-button-sales:hover {
    background-color: #08090a08;
    border-color: transparent;
}

.last-cta-button-sales svg {
    pointer-events: none;
}

.last-cta-button-sales svg:not([class*="size-"]) {
    width: 0.75rem;
    height: 0.75rem;
}

.last-cta-two-columns {
    /* border: 2px solid blue; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 3.5rem;
    width: 100%;
    /* gap: 20px; */
}

/* grid ke beech ki stick */
.last-cta-two-columns>div:first-child {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #08090a0d;
}

.last-cta-two-columns>div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
}

.last-cta-column-1 {}

.last-cta-column-2 {}


.last-cta-column-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    border-radius: 1rem;
    border-width: 0.5px;
    border-style: solid;
    border-color: #08090a26;
    background-color: #fff;
    /* box-shadow: var(--shadow-button-sm); */
}

.last-cta-column-svg>svg {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--color-brand-light);
}

.last-cta-column-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.last-cta-heading {
    color: #08090a;
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.2px;
}

.last-cta-para {
    color: #08090a;
    text-align: center;
    font-size: 1rem;
    line-height: 150%;
}

.last-cta-a {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 15px;
    line-height: 150%;
    color: var(--color-brand-light);
    width: fit-content;
    position: relative;
}

.last-cta-a::after {
    content: "";
    position: absolute;
    top: -14px;
    right: -14px;
    bottom: -14px;
    left: -14px;
}

footer {
    /* border: 2px solid red; */
    width: 100%;
    background-color: #08090a08;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #08090a0d;
}

.footer-container {
    width: 100%;
    max-width: 1022px;
    margin-left: auto;
    margin-right: auto;
    border-left-width: 1px;
    border-right-width: 1px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: #08090a0d;
    overflow: hidden;
}

.footer-socials {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 4rem;
    padding-bottom: 1.5rem;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #08090a0d;
}

.footer-socials-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.footer-nav {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: grid;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    grid-template-columns: repeat(5, 1fr);
    /* gap: 1.5rem; */
}

.footer-nav-column {}

.footer-nav-caption {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 150%;
    letter-spacing: 0.65px;
    font-weight: 500;
    color: #08090a80;
}

.footer-nav-ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.footer-nav-li {
    display: list-item;
}

.footer-nav-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    outline-offset: 2px;
    cursor: pointer;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 500;
    flex-shrink: 0;
    transition-property: color, background-color;
    transition-duration: 100ms;
    color: #08090a;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    font-size: 0.875rem;
    line-height: 150%;
    background-color: transparent;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.footer-nav-a:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-brand-light);
}

.footer-nav-a:hover {
    background-color: #08090a08;
}


.footer-certs {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #08090a0d;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-cert-para {
    font-size: 0.875rem;
    line-height: 150%;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;
}

.footer-info {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 6rem;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #08090a0d;
    gap: 1rem;
    font-size: 13px;
    font-weight: 500;
}

.uptime {
    flex: 1
}

.uptime-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    width: fit-content;
    outline-offset: 2px;
    cursor: pointer;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 500;
    flex-shrink: 0;
    transition-property: color, background-color;
    transition-duration: 100ms;
    background-color: #08090a08;
    color: #08090a;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 13px;
    line-height: 150%;
}

.uptime-button:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--brand);
}

.copyright {
    flex: 1 1 0%;
    color: #08090a99;
    font-size: 13px;
    line-height: 150%;
    text-align: center;
}

.mode-color {
    display: flex;
    justify-content: flex-end;
    flex: 1 1 0%;
}

.mode-selector-container {
    border-radius: 9999px;
    position: relative;
    background-color: #08090a08;
    display: flex;
    align-items: center;
    width: fit-content;
    isolation: isolate;
    justify-content: flex-end;
    gap: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.mode-selector-image {
    outline-offset: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
    transition-property: color, background-color;
    transition-duration: 100ms;
    color: #08090a;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    font-size: 15px;
    border-radius: 9999px;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #08090a08;
}