/* =========================================================
   PROCLEP — RESOURCES PAGE
   PURE CSS
   NO BOOTSTRAP
========================================================= */

.res-page {

    --res-navy: #061a2d;
    --res-navy-two: #092f52;

    --res-blue: #287cf0;
    --res-blue-light: #59a9ff;

    --res-orange: #f59b24;
    --res-green: #45d19b;

    --res-text: #091b2e;
    --res-muted: #6b7b8d;

    --res-light: #f5f8fc;
    --res-border: #dfe7ef;

    color: var(--res-text);

    overflow: hidden;
}


/* =========================================================
   GLOBAL
========================================================= */

.res-container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;
}

.res-section {

    padding: 110px 0;
}

.res-white {
    background: #fff;
}

.res-light {
    background: #f5f8fc;
}

.res-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #6db5ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.res-blue {
    color: var(--res-blue);
}


/* =========================================================
   HERO
========================================================= */

.res-hero {

    position: relative;

    min-height: 730px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 76% 50%,
            rgba(45,139,255,.2),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #041525,
            #082c4c 58%,
            #063b69
        );
}

.res-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}

.res-hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}

.res-glow-one {

    width: 370px;

    height: 370px;

    top: -160px;

    right: -80px;

    background: rgba(37,131,248,.16);
}

.res-glow-two {

    width: 300px;

    height: 300px;

    bottom: -150px;

    left: -150px;

    background: rgba(40,115,220,.1);
}

.res-hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: .88fr 1.12fr;

    align-items: center;

    gap: 45px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.res-hero-content h1 {

    max-width: 600px;

    margin: 18px 0 25px;

    font-size:
        clamp(49px, 5.3vw, 73px);

    line-height: .98;

    letter-spacing: -4px;
}

.res-hero-content h1 span {

    display: block;

    color: var(--res-blue-light);
}

.res-hero-content > p {

    max-width: 520px;

    color: rgba(255,255,255,.57);

    font-size: 14px;

    line-height: 1.85;
}

.res-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;
}

.res-btn {

    min-height: 49px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 21px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    transition: .3s ease;
}

.res-btn-primary {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ffad2d,
            #f48612
        );

    box-shadow:
        0 12px 30px rgba(245,138,20,.22);
}

.res-btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(245,138,20,.32);
}

.res-btn-ghost {

    color: rgba(255,255,255,.7);

    border: 1px solid rgba(255,255,255,.14);

    background: rgba(255,255,255,.035);
}

.res-hero-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 38px;

    color: rgba(255,255,255,.28);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.res-meta-line {

    width: 25px;

    height: 1px;

    background: rgba(100,178,255,.55);
}


/* =========================================================
   HERO RESOURCE ORBIT
========================================================= */

.res-hero-visual {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* orbit rings */

.res-orbit {

    position: absolute;

    border: 1px solid rgba(91,171,255,.14);

    border-radius: 50%;

    pointer-events: none;
}

.res-orbit-one {

    width: 520px;

    height: 520px;

    transform:
        scaleY(.63)
        rotate(-18deg);

    animation:
        resOrbitSpin 24s linear infinite;
}

.res-orbit-two {

    width: 415px;

    height: 415px;

    transform:
        scaleX(.72)
        rotate(38deg);

    border-color:
        rgba(91,171,255,.18);

    animation:
        resOrbitSpinReverse 18s linear infinite;
}

.res-orbit-three {

    width: 315px;

    height: 315px;

    border-style: dashed;

    border-color:
        rgba(91,171,255,.2);

    animation:
        resOrbitSpin 16s linear infinite;
}


/* =========================================================
   CENTRAL KNOWLEDGE CORE
========================================================= */

.res-resource-core {

    position: relative;

    z-index: 10;

    width: 220px;

    height: 220px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(35,120,211,.65),
            rgba(4,24,42,.97) 68%
        );

    box-shadow:
        0 0 80px rgba(51,147,255,.17),
        inset 0 0 45px rgba(83,169,255,.1);
}

.res-core-inner {

    width: 172px;

    height: 172px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(91,170,255,.23);

    border-radius: 50%;
}

.res-core-symbol {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    margin-bottom: 12px;
}

.res-core-symbol span {

    width: 5px;

    border-radius: 4px;

    background: #5baaff;
}

.res-core-symbol span:nth-child(1) {
    height: 15px;
}

.res-core-symbol span:nth-child(2) {
    height: 27px;
}

.res-core-symbol span:nth-child(3) {
    height: 20px;
}

.res-core-inner strong {

    color: rgba(255,255,255,.8);

    font-size: 16px;

    letter-spacing: 1.5px;
}

.res-core-inner small {

    margin-top: 6px;

    color: rgba(255,255,255,.27);

    font-size: 5px;

    letter-spacing: 1.1px;
}


/* =========================================================
   FLOATING GUIDE CARD
========================================================= */

.res-float-card {

    position: absolute;

    z-index: 15;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 9px;

    background:
        rgba(5,25,43,.88);

    box-shadow:
        0 25px 55px rgba(0,0,0,.25);

    backdrop-filter: blur(14px);
}

.res-card-guide {

    top: 68px;

    left: 20px;

    width: 155px;

    padding: 15px;

    transform:
        rotate(-6deg);
}

.res-card-top {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;
}

.res-card-icon {

    width: 27px;

    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 6px;

    color: #5baaff;

    background: rgba(76,158,244,.1);

    font-size: 12px;
}

.res-card-top small {

    color: rgba(255,255,255,.28);

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1px;
}

.res-card-guide > strong {

    color: rgba(255,255,255,.75);

    font-size: 10px;

    line-height: 1.45;
}

.res-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;

    padding-top: 10px;

    border-top: 1px solid rgba(255,255,255,.08);

    color: #5baaff;

    font-size: 5px;

    font-weight: 800;

    letter-spacing: .8px;
}


/* =========================================================
   REPORT CARD
========================================================= */

.res-card-report {

    top: 110px;

    right: 10px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    transform:
        rotate(6deg);
}

.res-report-icon {

    width: 29px;

    height: 29px;

    display: grid;

    place-items: center;

    border-radius: 6px;

    color: #f6a12e;

    background: rgba(246,161,46,.1);

    font-size: 12px;
}

.res-card-report small {

    display: block;

    margin-bottom: 4px;

    color: rgba(255,255,255,.25);

    font-size: 5px;

    letter-spacing: 1px;
}

.res-card-report strong {

    color: rgba(255,255,255,.7);

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.res-video-card {

    position: absolute;

    z-index: 16;

    right: 20px;

    bottom: 90px;

    width: 190px;

    display: grid;

    grid-template-columns: 36px 1fr auto;

    align-items: center;

    gap: 10px;

    padding: 13px;

    border: 1px solid rgba(255,255,255,.11);

    border-radius: 8px;

    background:
        rgba(4,24,42,.9);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25);

    transform:
        rotate(-4deg);
}

.res-video-play {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #378df4,
            #1764be
        );

    font-size: 16px;
}

.res-video-card small {

    display: block;

    margin-bottom: 4px;

    color: rgba(255,255,255,.24);

    font-size: 5px;

    letter-spacing: 1px;
}

.res-video-card strong {

    color: rgba(255,255,255,.7);

    font-size: 7px;

    line-height: 1.4;
}

.res-video-time {

    align-self: end;

    color: rgba(255,255,255,.25);

    font-size: 10px;
}


/* =========================================================
   INSIGHT CARD
========================================================= */

.res-insight-card {

    position: absolute;

    z-index: 13;

    left: 15px;

    bottom: 105px;

    width: 145px;

    padding: 13px;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 8px;

    background:
        rgba(255,255,255,.035);

    transform:
        rotate(5deg);
}

.res-insight-top {

    display: flex;

    justify-content: space-between;

    color: rgba(255,255,255,.3);

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1px;
}

.res-insight-top b {

    color: #5aaaff;

    font-size: 12px;
}

.res-insight-lines {

    margin: 16px 0;
}

.res-insight-lines i {

    display: block;

    height: 4px;

    margin-bottom: 6px;

    border-radius: 5px;

    background: rgba(91,171,255,.13);
}

.res-insight-lines i:nth-child(1) {
    width: 88%;
}

.res-insight-lines i:nth-child(2) {
    width: 65%;
}

.res-insight-lines i:nth-child(3) {
    width: 78%;
}

.res-insight-lines i:nth-child(4) {
    width: 45%;
}

.res-insight-bottom {

    color: #5baaff;

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   DOCUMENT
========================================================= */

.res-document {

    position: absolute;

    z-index: 8;

    top: 215px;

    left: 70px;

    width: 110px;

    min-height: 145px;

    padding: 13px;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 5px;

    background:
        rgba(255,255,255,.04);

    transform:
        rotate(-12deg);
}

.res-document-head {

    display: flex;

    justify-content: space-between;

    color: rgba(255,255,255,.25);

    font-size: 5px;

    font-weight: 800;
}

.res-document-head b {

    color: #f3a03a;
}

.res-document-title {

    margin-top: 20px;

    color: rgba(255,255,255,.68);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.4;
}

.res-document-lines {

    margin-top: 18px;
}

.res-document-lines i {

    display: block;

    height: 3px;

    margin-bottom: 5px;

    background: rgba(255,255,255,.1);
}


/* =========================================================
   PARTICLES
========================================================= */

.res-particle {

    position: absolute;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #5baaff;

    box-shadow:
        0 0 14px rgba(91,171,255,.8);
}

.res-particle-one {

    top: 120px;

    right: 170px;
}

.res-particle-two {

    top: 280px;

    left: 35px;
}

.res-particle-three {

    bottom: 145px;

    right: 150px;
}

.res-particle-four {

    top: 400px;

    left: 150px;
}


/* orbit labels */

.res-orbit-label {

    position: absolute;

    z-index: 18;

    color: rgba(255,255,255,.28);

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.res-label-one {

    top: 120px;

    right: 90px;
}

.res-label-two {

    bottom: 180px;

    right: 90px;
}

.res-label-three {

    bottom: 100px;

    left: 145px;
}

.res-visual-caption {

    position: absolute;

    right: 15px;

    bottom: 28px;

    color: rgba(255,255,255,.18);

    font-size: 10px;

    letter-spacing: 2px;
}


@keyframes resOrbitSpin {

    from {
        transform:
            scaleY(.63)
            rotate(-18deg);
    }

    to {
        transform:
            scaleY(.63)
            rotate(342deg);
    }
}

@keyframes resOrbitSpinReverse {

    from {
        transform:
            scaleX(.72)
            rotate(38deg);
    }

    to {
        transform:
            scaleX(.72)
            rotate(-322deg);
    }
}


/* =========================================================
   INTRO
========================================================= */

.res-intro {

    display: grid;

    grid-template-columns: 170px 1fr;

    gap: 80px;
}

.res-section-marker {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    padding-top: 10px;
}

.res-section-marker span {

    color: var(--res-blue);

    font-size: 28px;

    font-weight: 700;
}

.res-section-marker i {

    width: 35px;

    height: 1px;

    background: var(--res-border);
}

.res-section-marker small {

    color: #9aa7b5;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}

.res-intro-content {

    max-width: 820px;
}

.res-intro-content h2 {

    margin: 15px 0 25px;

    font-size:
        clamp(39px,4.4vw,57px);

    line-height: 1.04;

    letter-spacing: -2.7px;
}

.res-intro-content h2 span {

    display: block;

    color: var(--res-blue);
}

.res-intro-content p {

    max-width: 710px;

    color: var(--res-muted);

    font-size: 13px;

    line-height: 1.9;
}

.res-intro-content .res-intro-lead {

    color: #354a5d;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   HEADINGS
========================================================= */

.res-heading {

    max-width: 720px;

    margin-bottom: 55px;
}

.res-heading h2 {

    margin: 15px 0;

    font-size:
        clamp(38px,4vw,54px);

    line-height: 1.03;

    letter-spacing: -2.3px;
}

.res-heading h2 span {

    color: var(--res-blue);
}

.res-heading p {

    max-width: 550px;

    color: var(--res-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   CATEGORY CARDS
========================================================= */

.res-category-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 1px;

    border: 1px solid var(--res-border);

    background: var(--res-border);
}

.res-category-card {

    position: relative;

    min-height: 325px;

    padding: 28px;

    color: var(--res-text);

    text-decoration: none;

    background: #fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.res-category-card:hover {

    z-index: 2;

    transform: translateY(-6px);

    box-shadow:
        0 25px 55px rgba(17,61,98,.09);
}

.res-category-number {

    color: #a0adba;

    font-size: 12px;

    font-weight: 800;
}

.res-category-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    margin: 34px 0 24px;

    border-radius: 9px;

    color: var(--res-blue);

    background: #edf5ff;

    font-size: 17px;
}

.res-category-card h3 {

    margin: 0 0 11px;

    font-size: 16px;
}

.res-category-card p {

    max-width: 220px;

    margin: 0;

    color: var(--res-muted);

    font-size: 16px;

    line-height: 1.85;
}

.res-category-link {

    position: absolute;

    left: 28px;

    bottom: 27px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--res-blue);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .7px;
}

.res-category-link span {

    font-size: 12px;

    transition: .3s ease;
}

.res-category-card:hover
.res-category-link span {

    transform: translateX(5px);
}


/* =========================================================
   FEATURED RESOURCE
========================================================= */

.res-featured {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 490px;

    border: 1px solid var(--res-border);

    background: #fff;
}

.res-featured-visual {

    position: relative;

    min-height: 490px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(42,131,239,.27),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #061b30,
            #0a3a65
        );
}

.res-featured-grid {

    position: absolute;

    inset: 0;

    opacity: .2;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}

.res-featured-orbit {

    position: absolute;

    width: 330px;

    height: 330px;

    left: 50%;

    top: 50%;

    border: 1px solid rgba(93,174,255,.24);

    border-radius: 50%;

    transform:
        translate(-50%,-50%)
        scaleX(.7)
        rotate(25deg);
}

.res-featured-core {

    position: absolute;

    width: 190px;

    height: 190px;

    left: 50%;

    top: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            #174f82,
            #061a2d 70%
        );

    box-shadow:
        0 0 80px rgba(53,150,255,.2);
}

.res-featured-core span {

    color: #65b0ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.res-featured-core strong {

    margin-top: 8px;

    color: #fff;

    font-size: 19px;

    letter-spacing: 1px;
}

.res-featured-core small {

    margin-top: 7px;

    color: rgba(255,255,255,.3);

    font-size: 10px;

    letter-spacing: 1px;
}

.res-featured-tag {

    position: absolute;

    padding: 7px 10px;

    border: 1px solid rgba(255,255,255,.11);

    border-radius: 5px;

    color: rgba(255,255,255,.55);

    background: rgba(255,255,255,.04);

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1px;
}

.tag-a {

    top: 90px;

    left: 65px;

    transform: rotate(-8deg);
}

.tag-b {

    right: 55px;

    top: 105px;

    transform: rotate(8deg);
}

.tag-c {

    right: 75px;

    bottom: 95px;

    transform: rotate(-5deg);
}

.res-featured-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 60px;
}

.res-featured-content h2 {

    max-width: 500px;

    margin: 15px 0 20px;

    font-size:
        clamp(34px,3.3vw,48px);

    line-height: 1.06;

    letter-spacing: -2px;
}

.res-featured-content h2 span {

    color: var(--res-blue);
}

.res-featured-content > p {

    max-width: 500px;

    color: var(--res-muted);

    font-size: 16px;

    line-height: 1.9;
}

.res-featured-info {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 28px;

    padding-top: 18px;

    border-top: 1px solid var(--res-border);

}

.res-featured-info span {

    color: #8c9aa8;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .9px;
}

.res-text-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    color: var(--res-blue);

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;
}

.res-text-link span {

    font-size: 14px;

    transition: .3s ease;
}

.res-text-link:hover span {

    transform: translateX(5px);
}


/* =========================================================
   LATEST RESOURCES
========================================================= */

.res-latest-header {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 50px;
}

.res-latest-header h2 {

    margin: 15px 0 0;

    font-size:
        clamp(37px,4vw,53px);

    line-height: 1.04;

    letter-spacing: -2.3px;
}

.res-latest-header h2 span {

    display: block;

    color: var(--res-blue);
}

.res-view-all {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 8px;

    color: var(--res-blue);

    border-bottom: 1px solid rgba(40,124,240,.25);

    text-decoration: none;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .8px;
}

.res-view-all span {

    font-size: 13px;
}

.res-resource-list {

    border-top: 1px solid var(--res-border);
}

.res-resource-row {

    display: grid;

    grid-template-columns: 150px 1fr 100px 45px;

    align-items: center;

    gap: 30px;

    min-height: 125px;

    border-bottom: 1px solid var(--res-border);

    transition: .25s ease;
}

.res-resource-row:hover {

    padding-left: 10px;

    background: rgba(255,255,255,.55);
}

.res-resource-type {

    color: var(--res-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.res-resource-type span {

    margin-right: 12px;

    color: #a1adba;
}

.res-resource-main h3 {

    margin: 0 0 7px;

    font-size: 14px;
}

.res-resource-main p {

    max-width: 550px;

    margin: 0;

    color: var(--res-muted);

    font-size: 12px;

    line-height: 1.7;
}

.res-resource-meta {

    color: #9aa7b4;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;
}

.res-resource-arrow {

    width: 33px;

    height: 33px;

    display: grid;

    place-items: center;

    border: 1px solid #dbe5ee;

    border-radius: 50%;

    color: var(--res-blue);

    text-decoration: none;

    font-size: 12px;

    transition: .3s ease;
}

.res-resource-row:hover
.res-resource-arrow {

    color: #fff;

    background: var(--res-blue);

    border-color: var(--res-blue);
}


/* =========================================================
   FINAL CTA
========================================================= */

.res-final {

    padding-top: 0;

    background: #fff;
}

.res-final-box {

    position: relative;

    display: grid;

    grid-template-columns: 1fr .85fr;

    align-items: center;

    gap: 60px;

    padding: 65px;

    overflow: hidden;

    border-radius: 20px;

    color: #fff;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(46,143,255,.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061a2d,
            #0a3862
        );
}

.res-final-pattern {

    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 44px 44px;
}

.res-final-content,
.res-subscribe {

    position: relative;

    z-index: 2;
}

.res-final-content h2 {

    max-width: 580px;

    margin: 15px 0;

    font-size:
        clamp(37px,4vw,53px);

    line-height: 1.04;

    letter-spacing: -2.3px;
}

.res-final-content h2 span {

    display: block;

    color: #5caaff;
}

.res-final-content p {

    max-width: 500px;

    margin: 0;

    color: rgba(255,255,255,.43);

    font-size: 16px;

    line-height: 1.8;
}

.res-input-wrap {

    display: flex;

    min-height: 53px;

    padding: 5px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 8px;

    background: rgba(255,255,255,.045);
}

.res-input-wrap input {

    min-width: 0;

    flex: 1;

    padding: 0 15px;

    outline: none;

    border: 0;

    color: #fff;

    background: transparent;

    font-family: inherit;

    font-size: 10px;
}

.res-input-wrap input::placeholder {

    color: rgba(255,255,255,.28);
}

.res-input-wrap button {

    padding: 0 17px;

    border: 0;

    border-radius: 5px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ffad2d,
            #f48612
        );

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;
}

.res-input-wrap button span {

    margin-left: 8px;

    font-size: 12px;
}

.res-subscribe > small {

    display: block;

    margin-top: 12px;

    color: rgba(255,255,255,.24);

    font-size: 10px;

    letter-spacing: .5px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .res-hero-container {

        grid-template-columns: 1fr;
    }

    .res-hero-content {

        max-width: 700px;

        margin: auto;

        text-align: center;
    }

    .res-hero-content > p {

        margin-left: auto;

        margin-right: auto;
    }

    .res-hero-actions,
    .res-hero-meta {

        justify-content: center;
    }

    .res-hero-visual {

        max-width: 680px;

        width: 100%;

        margin: auto;
    }

    .res-category-grid {

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

    .res-featured {

        grid-template-columns: 1fr;
    }

    .res-featured-visual {

        min-height: 420px;
    }

    .res-final-box {

        grid-template-columns: 1fr;
    }
}


@media (max-width: 850px) {

    .res-intro {

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .res-section-marker {

        flex-direction: row;

        align-items: center;
    }

    .res-section-marker i {

        width: 25px;
    }

    .res-resource-row {

        grid-template-columns:
            100px 1fr 40px;

        gap: 20px;
    }

    .res-resource-meta {

        display: none;
    }
}


@media (max-width: 700px) {

    .res-section {

        padding: 80px 0;
    }

    .res-container {

        width:
            min(100% - 30px, 1180px);
    }

    .res-hero {

        min-height: auto;

        padding: 80px 0;
    }

    .res-hero-content h1 {

        font-size: 44px;

        letter-spacing: -2.5px;
    }

    .res-hero-visual {

        min-height: 500px;

        transform: scale(.9);

        transform-origin: center;
    }

    .res-category-grid {

        grid-template-columns: 1fr;
    }

    .res-category-card {

        min-height: 270px;
    }

    .res-featured-content {

        padding: 40px 28px;
    }

    .res-featured-visual {

        min-height: 390px;
    }

    .res-latest-header {

        align-items: flex-start;

        flex-direction: column;
    }

    .res-resource-row {

        grid-template-columns: 45px 1fr 35px;

        gap: 12px;

        padding: 18px 0;
    }

    .res-resource-type {

        font-size: 5px;
    }

    .res-resource-type span {

        display: block;

        margin: 0 0 5px;
    }

    .res-resource-main h3 {

        font-size: 16px;
    }

    .res-resource-main p {

        font-size: 7px;
    }

    .res-final-box {

        padding: 40px 28px;
    }

    .res-input-wrap {

        flex-direction: column;

        gap: 5px;

        padding: 5px;
    }

    .res-input-wrap input {

        min-height: 45px;
    }

    .res-input-wrap button {

        min-height: 43px;
    }
}


@media (max-width: 500px) {

    .res-hero-content h1 {

        font-size: 39px;
    }

    .res-hero-actions {

        flex-direction: column;
    }

    .res-hero-actions .res-btn {

        width: 100%;
    }

    .res-hero-visual {

        min-height: 430px;

        transform: scale(.72);
    }

    .res-card-guide {

        left: 0;
    }

    .res-card-report {

        right: 0;
    }

    .res-video-card {

        right: 0;
    }

    .res-insight-card {

        left: 0;
    }

    .res-document {

        left: 50px;
    }

    .res-intro-content h2,
    .res-heading h2,
    .res-latest-header h2 {

        font-size: 36px;

        letter-spacing: -1.8px;
    }

    .res-featured-content h2 {

        font-size: 33px;
    }

    .res-final-content h2 {

        font-size: 32px;
    }
}