/* @import "variables.css";
@import "navigation.css";
@import "buttons.css";
@import "landing-hero.css";
@import "landing-customizable.css";
@import "landing-why-rankioz.css";
@import "landing-metrics.css";
@import "landing-seo.css";
@import "landing-blog-preview.css";
@import "subscribe.css";
@import "faq.css";
@import "footer.css";
@import "input.css";
@import "pricing-hero.css";
@import "cards.css";
@import "feature-list.css";
@import "blog.css"; */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    /*     overflow-y: auto; */
}

body.admin-bar .top-nav {
    margin-top: 32px;
}

/*======================
    Font Faces
======================*/
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter_18pt-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/Inter_18pt-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*===========================
    Global Reset
===========================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-family);
    background-color: var(--bg-app);
    color: var(--black-500);
    display: block;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size: var(--font-size-heading-1-landing-page);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    color: var(--fg-primary);
}

.highlight {
    background: linear-gradient(92deg, #ffc700, #ffd952, #f97b22);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--border);
    margin: var(--spacing-sm) 0;
}

.divider.divider--on-dark {
    background-color: var(--border-on-dark);
}

h2 span.our-vision {
    width: 645px;
    height: 28px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.15px;
    color: #1C1E1F;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

h2 span.our-vision-text {
    width: 645px;
    height: 144px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    color: #1C1E1F;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

h2 span.our-vision,
h2 span.our-vision-txt {
    display: block;
    width: 100%;
}

div.blog-preview-header.our-vision .our-vision-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    width: 645px;
    height: 184px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

div.blog-preview-header.our-vision h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 0;
    max-width: 490px;
    height: 184px;
    flex: none;
    order: 0;
    flex-grow: 1;
}

div.blog-preview-header.our-vision .blog-preview-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 0;
    max-width: 507px;
    height: 192px;
    flex: none;
    order: 1;
    flex-grow: 1;
}

@media (max-width: 1024px) {
    div.blog-preview-header.our-vision .our-vision-heading {
        max-width: 645px;
        width: 100%;
    }

    div.blog-preview-header.our-vision h2 {
        gap: 15px;
    }
}

/*TODO check*/
.about-us .metrics-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the cards horizontally */
    gap: 1rem; /* Optional: adds some spacing between cards */
    padding: 0 1rem; /* Optional: adds horizontal padding on smaller screens */
    max-width: 1405px;
    margin: 0 auto; /* Centers the container itself */
}


/*todo check*/
/*.about-us .metrics-container .metric-card {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*    padding: 24px;*/
/*    gap: 12px;*/
/*    max-width: 427.67px;*/
/*    min-height: 144px;*/
/*    background: #FFFFFF;*/
/*    border-radius: 16px;*/
/*    flex: none;*/
/*    order: 0;*/
/*    align-self: stretch;*/
/*    flex-grow: 1;*/
/*}*/
.about-us .metrics-container .metric-card {
    flex: 1 1 30%; /* Grow and shrink, with a base width of about 30% */
    max-width: 427.67px; /* Do not let it become too wide */
    min-width: 280px; /* (Optional) Set a minimum width to help maintain readability */
    padding: 24px;
    background: #FFFFFF;
    border-radius: 16px;
    box-sizing: border-box;
}


.about-us .metrics-container .metric-card h3 {
    max-width: 346.67px;
    min-height: 24px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    color: #1C1E1F;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.about-us .metrics-container .metric-card p {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 32px;
    max-width: 346.67px;
    min-height: 60px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.about-us .metrics-container .metric-card h3,
.about-us .metrics-container .metric-card p {
    text-align: left;
    align-self: flex-start;
    width: 100%;
}

@media (max-width: 1024px) {
    .about-us .metrics-container {
        padding: var(--spacing-2xl) var(--spacing-xl);
    }
}

body.home .hero-left {
    margin: auto;
}

.hero-left h1 {
    text-align: center;
    max-width: 700px;
    margin: auto;
}

.hero-left-text-arrow {
    max-width: 800px;
    margin: auto;
    text-align: center;
}

body.home .hero-left .button--filled {
    margin: auto;
}

body.home .hero-container {
    padding-bottom: 0;
}

.rankioz-on-page-seo-screenshot {
    max-width: 1200px;
    max-height: 612.49px;
    filter: drop-shadow(0px 20px 50px rgba(0, 22, 77, 0.1));
    border-radius: 16px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.rankioz-developer-working-on-a-laptop {
    max-width: 532px;
    max-height: 342px;
    border-radius: 40px;
    flex: none;
    order: 0;
    flex-grow: 1;
}

.rankioz-meta-and-title-on-page-screenshot {
    max-width: 473px;
    max-height: 473px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.domain-authority-and-a-spam-score-screenshot {
    max-width: 496px;
    max-height: 343.87px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

@media (max-width: 739px) {
    .rankioz-developer-working-on-a-laptop {
        max-width: 342px;
        max-height: 219.86px;
        border-radius: 40px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .rankioz-meta-and-title-on-page-screenshot {
        max-width: 272px;
        max-height: 272px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }

    .domain-authority-and-a-spam-score-screenshot {
        max-width: 272px;
        max-height: 188.92px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }
}

.rankioz-on-page-seo-screenshot-mobile-viewport {
    width: 420px;
    max-width: 420px;
    height: 701.53px;
    max-height: 701.53px;
    filter: drop-shadow(0px 20px 50px rgba(0, 22, 77, 0.1));
    border-radius: 16px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.meet-the-rankioz-team .seo-results-container .seo-results-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 60px;
    max-width: 1184px;
    max-height: 104px;
    flex: none;
    order: 0;
    flex-grow: 1;
}

.meet-the-rankioz-team .seo-results-container .seo-results-content h3 {
    max-width: 1184px;
    max-height: 48px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    flex: none;
    order: 0;
    align-self: center;
    flex-grow: 0;
}

.meet-the-rankioz-team .seo-results-container .seo-results-content p {
    max-width: 1184px;
    max-height: 24px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.15px;
    color: rgba(255, 255, 255, 0.8);
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.meet-the-rankioz-team .seo-results-container .seo-metrics {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 32px;
    max-height: 520px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.meet-the-rankioz-team .seo-results-container .seo-metrics .team-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 60px;
    max-width: 100%;
    max-height: 520px;
    flex: none;
    order: 0;
    align-self: center;
    flex-grow: 0;
}

.meet-the-rankioz-team .seo-results-container .seo-metrics .team-row .team-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    gap: 12px;
    max-height: 550px;
    background: #F7F7F7;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    flex: none;
    order: 0;
    flex-grow: 1;
}

.meet-the-rankioz-team.seo-results-section .seo-metrics .team-row .team-card img {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px;
    gap: 10px;
    isolation: isolate;
    max-width: 300px;
    max-height: 394px;
    flex: none;
    order: 0;
    flex-grow: 1;
    border-radius: 16px;
}

.meet-the-rankioz-team.seo-results-section .seo-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 80px;
    gap: 60px;
    max-width: 1440px;
    max-height: 804px;
    background: #1C1E1F;
    border-radius: 40px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.meet-the-rankioz-team h4 {
    max-width: 314px;
    height: 34px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 0.15px;
    color: #1C1E1F;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    text-align: left;
}

.meet-the-rankioz-team .job-title {
    max-width: 314px;
    height: 24px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #F2A841;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    text-align: left;
}

@media (max-width: 768px) {
    .meet-the-rankioz-team.seo-results-section .seo-results-container {
        padding: var(--spacing-4xl) var(--spacing-xl);
        border-radius: 0;
    }

    .meet-the-rankioz-team .seo-results-container .seo-metrics .team-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 24px;
        width: 377px;
        height: 816px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .meet-the-rankioz-team .seo-results-container .seo-metrics .team-row .team-card {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px;
        gap: 8px;
        width: 310px;
        max-width: 362px;
        height: 450px;
        background: #F7F7F7;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 16px;
        flex: none;
        order: 0;
        align-self: center;
        flex-grow: 0;
    }

    .meet-the-rankioz-team.seo-results-section .seo-metrics .team-row .team-card img {
        max-width: 263px;
    }
}

@media (max-width: 1024px) {
    .meet-the-rankioz-team .seo-results-container .seo-results-content {
        align-items: stretch;
        gap: var(--spacing-3xl);
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        max-width: 912px;
        width: 100%;
        gap: var(--spacing-xl);
    }

    .about-us .metrics-container .metric-card {
        align-self: center !important;
    }

    .meet-the-rankioz-team .seo-results-container .seo-metrics {
        align-self: center !important;
    }

    .rankioz-on-page-seo-screenshot {
        max-width: 885px;
    }
}

@media (max-width: 768px) {
    .meet-the-rankioz-team.seo-results-section .seo-results-container,
    .meet-the-rankioz-team .seo-results-container .seo-results-content,
    .meet-the-rankioz-team .seo-results-container .seo-metrics,
    .meet-the-rankioz-team .seo-results-container .seo-metrics .team-row,
    .meet-the-rankioz-team .seo-results-container .seo-metrics .team-row .team-card {
        height: auto;
        max-height: none;
    }

    .meet-the-rankioz-team.seo-results-section .seo-results-container {
        padding: 20px 20px 70px 20px;
        gap: 20px;
        border-radius: 0;
        background: #1C1E1F;
    }

    .meet-the-rankioz-team .seo-results-container .seo-results-content {
        padding: 70px 10px 70px 10px;
        text-align: center;
        gap: 65px;
    }

    .meet-the-rankioz-team .seo-results-container .seo-metrics .team-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .meet-the-rankioz-team .seo-results-container .seo-metrics .team-row .team-card {
        padding: 16px;
        max-width: 260px;
        width: 100%;
        margin: 0 auto;
    }

    .meet-the-rankioz-team.seo-results-section .seo-metrics .team-row .team-card img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

.rankioz-on-page-seo-screenshot {
    display: block;
    width: 100%;
    max-width: 1400px;
    height: auto;
    filter: drop-shadow(0px 20px 50px rgba(0, 22, 77, 0.1));
    border-radius: 16px;
}

.rankioz-developer-working-on-a-laptop {
    display: block;
    width: 100%;
    max-width: 532px;
    height: auto;
    border-radius: 40px;
}

.customizable-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.customizable-left > div {
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 768px) {
    .about-us .metrics-container {
        flex-direction: column;
        align-items: center;
    }

    .about-us .metrics-container .metric-card {
        flex: none;
        width: 90%;
        max-width: 100%;
    }

    .page-template-page-about-us .footer-section {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .blog-preview-header.our-vision {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 2rem !important;
        padding: 1rem !important;
    }

    .blog-preview-header.our-vision .our-vision-heading {
        width: 45% !important;
        max-width: none !important;
        height: auto !important;
    }

    .blog-preview-header.our-vision .blog-preview-header-right {
        width: 50% !important;
        max-width: none !important;
        height: auto !important;
    }
}