/*
|--------------------------------------------------------------------------
| Global Reset
|--------------------------------------------------------------------------
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f8fafc;

    color:
        #1e293b;

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;
}


img {
    max-width:
        100%;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
textarea,
select {
    font:
        inherit;
}


.container {
    width:
        min(
            1120px,
            92%
        );

    margin:
        0 auto;
}


main {
    min-height:
        70vh;
}


/*
|--------------------------------------------------------------------------
| Site Header
|--------------------------------------------------------------------------
*/

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    border-bottom:
        1px solid
        #e2e8f0;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.navbar {
    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.logo {
    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

    color:
        #0f172a;

    font-size:
        1.4rem;

    font-weight:
        700;

    letter-spacing:
        -0.02em;
}


.logo:hover {
    color:
        #16758f;
}


/*
|--------------------------------------------------------------------------
| Desktop Navigation
|--------------------------------------------------------------------------
*/

.main-nav {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        20px;
}


.main-nav a {
    position:
        relative;

    color:
        #475569;

    font-size:
        0.95rem;

    font-weight:
        500;

    transition:
        color 0.2s ease;
}


.main-nav a::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    background:
        #38a8c7;

    transition:
        width 0.2s ease;
}


.main-nav a:hover {
    color:
        #16758f;
}


.main-nav a:hover::after {
    width:
        100%;
}


/*
|--------------------------------------------------------------------------
| Mobile Menu Button
|--------------------------------------------------------------------------
*/

.mobile-nav-toggle {
    display:
        none;

    width:
        44px;

    height:
        44px;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    padding:
        0;

    border:
        1px solid #dbe5e9;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #0f172a;

    cursor:
        pointer;

    font-size:
        1.35rem;

    line-height:
        1;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.mobile-nav-toggle:hover {
    background:
        #eef8fb;

    border-color:
        #b9dce5;

    color:
        #16758f;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    margin-top:
        70px;

    background:
        #0f172a;

    color:
        #cbd5e1;
}


.footer-content {
    min-height:
        180px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        30px 0;
}


.footer-content h3 {
    margin-bottom:
        8px;

    color:
        #ffffff;
}


.footer-content p {
    color:
        #94a3b8;
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero {
    padding:
        100px 20px;

    background:
        linear-gradient(
            135deg,
            #eef8fb 0%,
            #eff6ff 100%
        );
}


.hero .container {
    max-width:
        850px;

    text-align:
        center;
}


.hero p:first-child {
    margin-bottom:
        10px;

    color:
        #16758f;

    font-weight:
        700;

    letter-spacing:
        0.04em;
}


.hero h1 {
    margin-bottom:
        15px;

    color:
        #0f172a;

    font-size:
        clamp(
            2.5rem,
            7vw,
            4.5rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.04em;
}


.hero h2 {
    max-width:
        750px;

    margin:
        0 auto 20px;

    color:
        #475569;

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.6rem
        );

    font-weight:
        500;

    line-height:
        1.45;
}


.hero p:last-child {
    max-width:
        700px;

    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        1.02rem;
}


/*
|--------------------------------------------------------------------------
| Page Header
|--------------------------------------------------------------------------
*/

.page-header {
    padding:
        80px 0;

    background:
        linear-gradient(
            135deg,
            #eef8fb 0%,
            #eff6ff 100%
        );
}


.page-header h1 {
    margin-bottom:
        15px;

    color:
        #0f172a;

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );

    line-height:
        1.15;

    letter-spacing:
        -0.03em;
}


.page-header p {
    max-width:
        700px;

    color:
        #64748b;

    font-size:
        1.02rem;
}


.eyebrow {
    margin-bottom:
        10px;

    color:
        #16758f !important;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| Content Sections
|--------------------------------------------------------------------------
*/

.content-section {
    padding:
        80px 0;
}


.content-grid {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            2fr
        )
        minmax(
            260px,
            1fr
        );

    gap:
        50px;

    align-items:
        start;
}


.content-grid h2 {
    margin-bottom:
        20px;

    color:
        #0f172a;

    font-size:
        2rem;

    line-height:
        1.25;
}


.content-grid p {
    margin-bottom:
        18px;

    color:
        #475569;
}


.info-card {
    padding:
        30px;

    background:
        #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        16px;

    box-shadow:
        0 10px 30px
        rgba(
            15,
            23,
            42,
            0.06
        );
}


.info-card h3 {
    margin-bottom:
        20px;

    color:
        #0f172a;
}


.info-card ul {
    list-style:
        none;
}


.info-card li {
    padding:
        10px 0;

    border-bottom:
        1px solid
        #e2e8f0;
}


.info-card li:last-child {
    border-bottom:
        none;
}


/*
|--------------------------------------------------------------------------
| Generic Cards
|--------------------------------------------------------------------------
*/

.card {
    background:
        #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        16px;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.05
        );
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn,
button {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.btn-primary {
    background:
        #16758f;

    color:
        #ffffff;

    border:
        1px solid
        #16758f;
}


.btn-primary:hover {
    background:
        #12657b;

    border-color:
        #12657b;

    transform:
        translateY(-1px);
}


.btn-secondary {
    background:
        #ffffff;

    color:
        #334155;

    border:
        1px solid
        #cbd5e1;
}


.btn-secondary:hover {
    background:
        #f8fafc;

    border-color:
        #94a3b8;
}


/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

input,
textarea,
select {
    color:
        #1e293b;
}


input:focus,
textarea:focus,
select:focus {
    outline:
        none;

    border-color:
        #38a8c7;

    box-shadow:
        0 0 0 3px
        rgba(
            56,
            168,
            199,
            0.14
        );
}


/*
|--------------------------------------------------------------------------
| Posts
|--------------------------------------------------------------------------
*/

.posts-page {
    padding:
        80px 20px 100px;

    background:
        linear-gradient(
            to bottom,
            #f8fafc 0,
            #ffffff 260px
        );
}


.posts-container {
    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;
}


.posts-header {
    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.posts-eyebrow,
.tutorials-eyebrow,
.videos-eyebrow,
.notes-eyebrow,
.downloads-eyebrow {
    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        #16758f;

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.posts-header h1 {
    margin-bottom:
        14px;

    color:
        #0f172a;

    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );

    line-height:
        1.15;

    letter-spacing:
        -0.03em;
}


.posts-header p {
    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        1rem;

    line-height:
        1.8;
}


.posts-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;
}


.post-card {
    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.05
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.post-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.10
        );
}


.post-card-image {
    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #eef8fb,
            #eff6ff
        );
}


.post-card-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;
}


.post-card:hover
.post-card-image img {
    transform:
        scale(1.05);
}


.post-card-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #7aa7b8;

    font-size:
        46px;
}


.post-card-content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        26px;
}


.post-category {
    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        13px;

    padding:
        6px 11px;

    border:
        1px solid #c7e5ed;

    border-radius:
        999px;

    background:
        #eef8fb;

    color:
        #16758f;

    font-size:
        0.72rem;

    font-weight:
        700;
}


.post-card h2 {
    margin:
        0 0 12px;

    font-size:
        1.3rem;

    line-height:
        1.4;
}


.post-card h2 a {
    color:
        #0f172a;

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}


.post-card h2 a:hover {
    color:
        #16758f;
}


.post-excerpt {
    margin:
        0 0 22px;

    color:
        #64748b;

    font-size:
        0.94rem;

    line-height:
        1.75;
}


.post-card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        auto;

    padding-top:
        16px;

    border-top:
        1px solid #edf1f4;
}


.post-card-meta {
    min-width:
        0;
}


.post-date {
    color:
        #94a3b8;

    font-size:
        0.8rem;
}


.read-more {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    flex-shrink:
        0;

    color:
        #16758f;

    font-size:
        0.88rem;

    font-weight:
        700;

    transition:
        gap 0.2s ease,
        color 0.2s ease;
}


.read-more:hover {
    gap:
        8px;

    color:
        #12657b;
}


.pagination {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        55px;
}


.pagination a,
.pagination span {
    min-width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 12px;

    border:
        1px solid #d9e1e5;

    border-radius:
        10px;

    font-size:
        0.88rem;
}


.pagination a {
    background:
        #ffffff;

    color:
        #16758f;
}


.pagination a:hover {
    background:
        #eef8fb;

    border-color:
        #b9dce5;
}


.pagination .current {
    background:
        #16758f;

    color:
        #ffffff;

    border-color:
        #16758f;
}


.empty-posts,
.empty-tutorials,
.empty-videos,
.empty-notes,
.empty-downloads {
    padding:
        70px 25px;

    text-align:
        center;

    background:
        #ffffff;

    border:
        1px dashed #cbd5e1;

    border-radius:
        18px;
}


.empty-posts h2,
.empty-tutorials h2,
.empty-videos h2,
.empty-notes h2,
.empty-downloads h2 {
    margin-bottom:
        10px;

    color:
        #0f172a;

    font-size:
        1.5rem;
}


.empty-posts p,
.empty-tutorials p,
.empty-videos p,
.empty-notes p,
.empty-downloads p {
    margin:
        0;

    color:
        #64748b;
}


/*
|--------------------------------------------------------------------------
| Tutorials
|--------------------------------------------------------------------------
*/

.tutorials-page {
    padding:
        80px 20px 100px;

    background:
        linear-gradient(
            to bottom,
            #f8fafc 0,
            #ffffff 260px
        );
}


.tutorials-container {
    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;
}


.tutorials-header {
    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.tutorials-header h1 {
    margin-bottom:
        14px;

    color:
        #0f172a;

    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );

    line-height:
        1.15;
}


.tutorials-header p {
    max-width:
        700px;

    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        1rem;

    line-height:
        1.8;
}


.tutorials-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;
}


.tutorial-card {
    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.05
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.tutorial-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.10
        );
}


.tutorial-image {
    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #eef8fb,
            #eff6ff
        );
}


.tutorial-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;
}


.tutorial-card:hover
.tutorial-image img {
    transform:
        scale(1.05);
}


.tutorial-image-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #7aa7b8;

    font-size:
        46px;
}


.tutorial-card-content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        26px;
}


.tutorial-category {
    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        13px;

    padding:
        6px 11px;

    border:
        1px solid #c7e5ed;

    border-radius:
        999px;

    background:
        #eef8fb;

    color:
        #16758f;

    font-size:
        0.72rem;

    font-weight:
        700;
}


.tutorial-card h2 {
    margin:
        0 0 12px;

    font-size:
        1.3rem;

    line-height:
        1.4;
}


.tutorial-card h2 a {
    color:
        #0f172a;

    text-decoration:
        none;
}


.tutorial-card h2 a:hover {
    color:
        #16758f;
}


.tutorial-description {
    margin:
        0 0 22px;

    color:
        #64748b;

    font-size:
        0.94rem;

    line-height:
        1.75;
}


.tutorial-meta {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin-top:
        auto;

    padding-top:
        16px;

    border-top:
        1px solid #edf1f4;
}


.tutorial-author,
.tutorial-date {
    color:
        #94a3b8;

    font-size:
        0.8rem;
}


.tutorial-card-footer {
    margin-top:
        18px;

    padding-top:
        0;
}


.read-tutorial {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    width:
        100%;

    padding:
        11px 15px;

    border-radius:
        10px;

    background:
        #16758f;

    color:
        #ffffff;

    font-size:
        0.88rem;

    font-weight:
        700;
}


.read-tutorial:hover {
    background:
        #12657b;

    gap:
        8px;
}


/*
|--------------------------------------------------------------------------
| Videos
|--------------------------------------------------------------------------
*/

.videos-page {
    padding:
        80px 20px 100px;

    background:
        linear-gradient(
            to bottom,
            #f8fafc 0,
            #ffffff 260px
        );
}


.videos-container {
    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;
}


.videos-header {
    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.videos-header h1 {
    margin-bottom:
        14px;

    color:
        #0f172a;

    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );

    line-height:
        1.15;
}


.videos-header p {
    max-width:
        700px;

    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        1rem;

    line-height:
        1.8;
}


.videos-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;
}


.video-card {
    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.05
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.video-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.10
        );
}


.video-thumbnail {
    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #eef8fb,
            #eff6ff
        );
}


.video-thumbnail img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;
}


.video-card:hover
.video-thumbnail img {
    transform:
        scale(1.05);
}


.video-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #7aa7b8;

    font-size:
        46px;
}


.video-play {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        62px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        rgba(
            15,
            23,
            42,
            0.78
        );

    color:
        #ffffff;

    font-size:
        24px;

    pointer-events:
        none;

    transition:
        transform 0.2s ease;
}


.video-card:hover
.video-play {
    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);
}


.video-card-content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        26px;
}


.video-category {
    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        13px;

    padding:
        6px 11px;

    border:
        1px solid #c7e5ed;

    border-radius:
        999px;

    background:
        #eef8fb;

    color:
        #16758f;

    font-size:
        0.72rem;

    font-weight:
        700;
}


.video-card h2 {
    margin:
        0 0 12px;

    font-size:
        1.3rem;

    line-height:
        1.4;
}


.video-card h2 a {
    color:
        #0f172a;

    text-decoration:
        none;
}


.video-card h2 a:hover {
    color:
        #16758f;
}


.video-description {
    margin:
        0 0 22px;

    color:
        #64748b;

    font-size:
        0.94rem;

    line-height:
        1.75;
}


.video-card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        auto;

    padding-top:
        16px;

    border-top:
        1px solid #edf1f4;
}


.video-date {
    color:
        #94a3b8;

    font-size:
        0.8rem;
}


.watch-video {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    flex-shrink:
        0;

    color:
        #16758f;

    font-size:
        0.88rem;

    font-weight:
        700;
}


.watch-video:hover {
    gap:
        8px;

    color:
        #12657b;
}


/*
|--------------------------------------------------------------------------
| Notes
|--------------------------------------------------------------------------
*/

.notes-page {
    padding:
        80px 20px 100px;

    background:
        linear-gradient(
            to bottom,
            #f8fafc 0,
            #ffffff 260px
        );
}


.notes-container {
    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;
}


.notes-header {
    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.notes-header h1 {
    margin-bottom:
        14px;

    color:
        #0f172a;

    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );

    line-height:
        1.15;
}


.notes-header p {
    max-width:
        700px;

    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        1rem;

    line-height:
        1.8;
}


.notes-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;
}


.note-card {
    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.05
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.note-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.10
        );
}


.note-thumbnail {
    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #eef8fb,
            #eff6ff
        );
}


.note-thumbnail img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;
}


.note-card:hover
.note-thumbnail img {
    transform:
        scale(1.05);
}


.note-thumbnail-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #7aa7b8;

    font-size:
        46px;
}


.note-card-content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        26px;
}


.note-category {
    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        13px;

    padding:
        6px 11px;

    border:
        1px solid #c7e5ed;

    border-radius:
        999px;

    background:
        #eef8fb;

    color:
        #16758f;

    font-size:
        0.72rem;

    font-weight:
        700;
}


.note-card h2 {
    margin:
        0 0 12px;

    color:
        #0f172a;

    font-size:
        1.3rem;

    line-height:
        1.4;
}


.note-description {
    margin:
        0 0 22px;

    color:
        #64748b;

    font-size:
        0.94rem;

    line-height:
        1.75;
}


.note-file-info {
    margin-top:
        auto;

    padding:
        14px 0;

    border-top:
        1px solid #edf1f4;

    border-bottom:
        1px solid #edf1f4;
}


.note-file-name {
    display:
        block;

    overflow:
        hidden;

    color:
        #475569;

    font-size:
        0.82rem;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.note-file-size {
    display:
        block;

    margin-top:
        4px;

    color:
        #94a3b8;

    font-size:
        0.78rem;
}


.note-card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding-top:
        16px;
}


.note-date {
    color:
        #94a3b8;

    font-size:
        0.8rem;
}


.download-note {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    flex-shrink:
        0;

    padding:
        9px 14px;

    border-radius:
        9px;

    background:
        #16758f;

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        700;
}


.download-note:hover {
    background:
        #12657b;

    gap:
        8px;
}


/*
|--------------------------------------------------------------------------
| Downloads
|--------------------------------------------------------------------------
*/

.downloads-page {
    padding:
        80px 20px 100px;

    background:
        linear-gradient(
            to bottom,
            #f8fafc 0,
            #ffffff 260px
        );
}


.downloads-container {
    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;
}


.downloads-header {
    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.downloads-header h1 {
    margin-bottom:
        14px;

    color:
        #0f172a;

    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );

    line-height:
        1.15;
}


.downloads-header p {
    max-width:
        700px;

    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        1rem;

    line-height:
        1.8;
}


.downloads-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;
}


.download-card {
    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.05
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.download-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.10
        );
}


.download-card-top {
    min-height:
        160px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #eef8fb,
            #eff6ff
        );
}


.download-icon {
    width:
        78px;

    height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        #16758f;

    font-size:
        34px;

    font-weight:
        700;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            0.08
        );
}


.download-card-content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        26px;
}


.download-category {
    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        13px;

    padding:
        6px 11px;

    border:
        1px solid #c7e5ed;

    border-radius:
        999px;

    background:
        #eef8fb;

    color:
        #16758f;

    font-size:
        0.72rem;

    font-weight:
        700;
}


.download-card h2 {
    margin:
        0 0 12px;

    color:
        #0f172a;

    font-size:
        1.3rem;

    line-height:
        1.4;
}


.download-description {
    margin:
        0 0 22px;

    color:
        #64748b;

    font-size:
        0.94rem;

    line-height:
        1.75;
}


.download-file-info {
    margin-top:
        auto;

    padding:
        14px 0;

    border-top:
        1px solid #edf1f4;

    border-bottom:
        1px solid #edf1f4;
}


.download-file-name {
    display:
        block;

    overflow:
        hidden;

    color:
        #475569;

    font-size:
        0.82rem;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.download-file-size {
    display:
        block;

    margin-top:
        4px;

    color:
        #94a3b8;

    font-size:
        0.78rem;
}


.download-card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding-top:
        16px;
}


.download-date {
    color:
        #94a3b8;

    font-size:
        0.8rem;
}


.download-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    flex-shrink:
        0;

    padding:
        9px 14px;

    border-radius:
        9px;

    background:
        #16758f;

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        700;
}


.download-button:hover {
    background:
        #12657b;

    gap:
        8px;
}


/*
|--------------------------------------------------------------------------
| Responsive Tablets
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .main-nav {
        gap:
            15px;
    }


    .main-nav a {
        font-size:
            0.9rem;
    }


    .posts-grid,
    .tutorials-grid,
    .videos-grid,
    .notes-grid,
    .downloads-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/*
|--------------------------------------------------------------------------
| Responsive Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    /*
    ----------------------------------------------------------------------
    | Header
    ----------------------------------------------------------------------
    */

    .site-header {
        position:
            sticky;

        top:
            0;
    }


    .navbar {
        min-height:
            68px;

        padding:
            10px 0;

        flex-wrap:
            wrap;

        gap:
            10px 15px;
    }


    .logo {
        font-size:
            1.25rem;
    }


    .mobile-nav-toggle {
        display:
            inline-flex;
    }


    .main-nav {
        display:
            none;

        order:
            3;

        width:
            100%;

        padding:
            10px 0 6px;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            flex-start;

        gap:
            0;

        border-top:
            1px solid #edf1f4;
    }


    .main-nav.open {
        display:
            flex;
    }


    .main-nav a {
        display:
            block;

        width:
            100%;

        padding:
            12px 4px;

        color:
            #334155;

        font-size:
            0.95rem;

        border-bottom:
            1px solid #edf1f4;
    }


    .main-nav a:last-child {
        border-bottom:
            none;
    }


    .main-nav a::after {
        display:
            none;
    }


    .main-nav a:hover {
        color:
            #16758f;

        background:
            #f8fbfc;
    }


    /*
    ----------------------------------------------------------------------
    | General
    ----------------------------------------------------------------------
    */

    .container {
        width:
            94%;
    }


    .hero {
        padding:
            65px 15px;
    }


    .hero h1 {
        font-size:
            2.25rem;
    }


    .hero h2 {
        font-size:
            1.08rem;
    }


    .hero p:last-child {
        font-size:
            0.95rem;
    }


    .page-header {
        padding:
            50px 0;
    }


    .content-section {
        padding:
            50px 0;
    }


    .content-grid {
        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .content-grid h2 {
        font-size:
            1.7rem;
    }


    .info-card {
        padding:
            22px;
    }


    /*
    ----------------------------------------------------------------------
    | Posts
    ----------------------------------------------------------------------
    */

    .posts-page,
    .tutorials-page,
    .videos-page,
    .notes-page,
    .downloads-page {
        padding:
            50px 15px 70px;
    }


    .posts-header,
    .tutorials-header,
    .videos-header,
    .notes-header,
    .downloads-header {
        margin-bottom:
            35px;
    }


    .posts-header h1,
    .tutorials-header h1,
    .videos-header h1,
    .notes-header h1,
    .downloads-header h1 {
        font-size:
            2rem;
    }


    .posts-header p,
    .tutorials-header p,
    .videos-header p,
    .notes-header p,
    .downloads-header p {
        font-size:
            0.94rem;
    }


    .posts-grid,
    .tutorials-grid,
    .videos-grid,
    .notes-grid,
    .downloads-grid {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .post-card-content,
    .tutorial-card-content,
    .video-card-content,
    .note-card-content,
    .download-card-content {
        padding:
            20px;
    }


    .post-card h2,
    .tutorial-card h2,
    .video-card h2,
    .note-card h2,
    .download-card h2 {
        font-size:
            1.15rem;
    }


    .post-card-footer,
    .video-card-footer,
    .note-card-footer,
    .download-card-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .read-more,
    .watch-video {
        align-self:
            flex-end;
    }


    .download-note,
    .download-button {
        width:
            100%;

        justify-content:
            center;
    }


    .footer-content {
        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        padding:
            35px 0;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .logo {
        font-size:
            1.15rem;
    }


    .hero {
        padding:
            55px 12px;
    }


    .hero h1 {
        font-size:
            2rem;
    }


    .hero h2 {
        font-size:
            1rem;
    }


    .mobile-nav-toggle {
        width:
            42px;

        height:
            42px;
    }


    .post-card-content,
    .tutorial-card-content,
    .video-card-content,
    .note-card-content,
    .download-card-content {
        padding:
            18px;
    }

}
.nav-search-link {
    padding-left: 8px;
}


@media (max-width: 700px) {

    .nav-search-link {
        padding-left: 4px;
    }

}
/*
|--------------------------------------------------------------------------
| Footer Links
|--------------------------------------------------------------------------
*/

.footer-content a {
    color:
        #cbd5e1;

    font-weight:
        600;

    transition:
        color 0.2s ease;
}


.footer-content a:hover {
    color:
        #ffffff;
}