@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");

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

body {
    color: rgba(255, 255, 255, 0.80);
    font-size: 16px;
    line-height: 150%;
    /* 24px */
    letter-spacing: -0.32px;
    font-family: "Host Grotesk", sans-serif;
    background-color: #151513;
    overflow-x: hidden;
}

.container {
    width: 100%;
    height: 100%;
}  



.wrapper {
    padding-inline: 2rem;
    max-width: 1440px;
    width: 100%;
    margin-inline: auto;
}

[data-text-anim] {
    visibility: hidden;
}

.duplicate-char {
    position: absolute;
    inset: 0;
    transform: translateY(100%);
}

.preloader-mask,
.preloader-progress-bar,
.preloader-bg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100svh;
    width: 100%;
    pointer-events: none;
}

/* .preloader-mask {
    z-index: 100;
    background-color: #1C1917;
    mask: linear-gradient(white, white), url('https://ik.imagekit.io/kg2nszxjp/ironstride-preloader/preloader-mask.svg') center/40% no-repeat;
    mask-composite: subtract;
} */

.preloader-progress-bar {
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #2D2925;
}

.preloader-bg {
    background-color: #fff;
    transform-origin: left;
    transform: scaleX(0.2);
}

.preloader-logo {
    display: flex;
    width: 100%;
    height: 100%;

    p {
        margin: auto;
        text-align: center;
        mix-blend-mode: difference;
        font-size: 4rem;
        color: #fff;
        font-weight: 500;
        line-height: 100%;
    }
}



button {
    display: flex;
    align-items: center;
    /* gap: 6px; */
    padding: 4px 4px 4px 16px;
    border-radius: 46px;
    border: none;
    outline: none;

    .btn-icon {
        width: 34px;
        height: 34px;
        background: #25201C;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
}

.header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 10;
    background: linear-gradient(180deg, #25201c 0%, rgba(37, 32, 28, 0) 100%);
}

.header .wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
    gap: 24px width: 100%;
    margin-top: 24px;
    margin-inline: auto;
}

.logo {
    margin-right: auto;
}

.tagline {
    font-weight: 700;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;

    p {
        max-width: 430px;
    }

    .divider {
        width: 1px;
        height: 40px;
        background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    }
}

.menu-button {
    margin-left: auto;
}

.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    height: 100svh;
    /* border-radius: 3rem; */
    overflow: hidden;
}

.hero-img {
    position: absolute;
    inset: 0;
    z-index: -10;

    img {
        will-change: transform;
        transform: scale(1.2);
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.hero-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.content-main {
    .sub-title {
        max-width: 240px;
        color: #FFF;
        font-size: 22px;
        font-weight: 700;
        line-height: 130%;
        letter-spacing: -0.66px;
    }

    h1 {
        margin-left: -12px;
        /* 		text-shadow: 0 4px 53.1px rgba(38, 35, 35, 0.26); */
        font-size: clamp(5rem, 12.752vw + 2.21rem, 13.688rem);
        font-weight: 600;
        line-height: 90%;
        /* 197.1px */
        letter-spacing: -8.76px;
        background: linear-gradient(180deg, #FFF 17.73%, #F7CFB4 92.44%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.header-char {
    background: linear-gradient(180deg, #FFF 17.73%, #F7CFB4 92.44%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content-cta {
    position: relative;
    max-width: 266px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFE5CF 0%, rgba(255, 191, 136, 0.90) 100%);
    box-shadow: 0 4px 54px 0 #2B1D10;
    overflow: hidden;

    .cta-marquee {
        background: #231A13;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        color: #FFCBA8;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.6px;
        margin-top: 10px;
    }

    .marquee-group {
        align-items: center;
        white-space: nowrap;
        width: max-content;
        display: flex;
        gap: 8px;
        padding-block: 10px;
        animation: scroll 30s linear infinite;
    }

    .register-button {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: max-content;
        margin: 0 auto 4px;
        background: #FF983F;
    }
}

.hero-video-frame {
    width: calc(100% - 20px);
    aspect-ratio: 16 / 10;
    margin: 10px auto 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: #151513;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hero-video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #151513;
}

@media (max-width: 767.98px) {
    .hero-video-frame {
        display: none;
    }
}

@keyframes scroll {
    to {
        transform: translateX(calc(-100% - 8px));
    }
}

/* NAV WRAPPER */
.pill-nav {
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;

}

/* PILL CONTAINER */
.pill-container {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    /* border-radius: 999px; */
    padding: 0.6rem 1.2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* LOGO */
.pill-logo {
    font-weight: 700;
    font-size: 1.25rem;
    color: #0f172a;
}

/* LINKS – DESKTOP */
.pill-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

/* LINKS */
.pill-links a {
    text-decoration: none;
    color: #334155;
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pill-links a:hover,
.pill-links a.active {
    background: #e0f2fe;
    color: #0369a1;
}

/* CTA */
.pill-btn {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff !important;
    font-weight: 600;
}


/* CTA */
.pill-btn2 {
    background: linear-gradient(135deg, #2563eb, #121c27);
    color: #fff !important;
    font-weight: 600;
}

/* HAMBURGER */
.pill-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.pill-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    margin: 5px;
    background: #0f172a;
    border-radius: 3px;
}

/* MOBILE DROPDOWN (HORIZONTAL) */
@media (max-width: 768px) {
    .pill-toggle {
        display: block;
    }

    .pill-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        justify-content: center;
        /* HORIZONTAL */
        flex-wrap: nowrap;
        gap: 0.8rem;
        padding: 0.8rem;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .pill-links.show {
        max-height: 120px;
        opacity: 1;
        pointer-events: auto;
    }
}


@media (max-width: 768px) {
    .pill-toggle {
        display: block;
    }

    .pill-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

        /* TRANSFORM TO BLOCK */
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;

        transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    /* SHOW MENU */
    .pill-links.show {
        max-height: 500px;
        /* enough to fit all links */
        opacity: 1;
        pointer-events: auto;
    }

    /* STACK LINKS VERTICALLY */
    .pill-links a {
        display: block;
        width: 90%;
        margin: 0.4rem auto;
        text-align: center;
        padding: 0.6rem 0;
        border-radius: 999px;
    }
}

/* Circles after Contact */
.circles-container {
    display: flex;
    align-items: center;
    margin-left: var(--spacing-md);
}

.circle {
    width: 12px;
    /* Increased from 10px to 12px */
    height: 12px;
    /* Increased from 10px to 12px */
    border-radius: 50%;
}

.circle-1 {
    background-color: var(--color-mountain-dark);
    margin-right: -4px;
    position: relative;
    z-index: 2;
}

.circle-2 {
    background-color: var(--color-mountain-light);
    position: relative;
    z-index: 1;
}

/* Hero Section */
/* 12-grid system */
.hero .container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}

.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hero__content {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--spacing-xl);
}

.hero__project {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    transform: translateY(20px);
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.hero__title {
    font-size: clamp(4rem, 8vw, 9rem);
    line-height: 0.9;
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.05em;
}

.hero__title-line {
    display: block;
    transform: translateY(100%);
    opacity: 0;
}

.hero__description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 460px;
    transform: translateY(20px);
    opacity: 0;
    margin-bottom: var(--spacing-xl);
}

.hero__meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    display: flex;
    justify-content: space-between;
    transform: translateY(20px);
    opacity: 0;
}

.hero__image-container {
    grid-column: 7 / span 6;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.hero__image {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: cover;
    transform: scale(1.1);
    transform-origin: center;
    will-change: transform;
}

/* ==============================
   SERVICES SECTION
================================ */

.services-section {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;

    /* Tiny black spots */
    background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1px,
            transparent 1px);

    background-size: 28px 28px;
}

/* Soft white overlay to keep the dots subtle */
.services-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.services-section .container {
    position: relative;
    z-index: 2;
}


/* ==============================
   HEADING WRAPPER
================================ */

.services-heading {
    max-width: 850px;
}


/* ==============================
   SERVICES LABEL
================================ */

.services-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #1d1d1d;
}

.label-line {
    width: 32px;
    height: 2px;
    display: inline-block;

    background: linear-gradient(90deg,
            #d71920,
            #2446a8);
}


/* ==============================
   MAIN TITLE
================================ */

.services-title {
    margin: 0;

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -2px;

    color: #111111;
}

.services-title span {
    display: block;

    background: linear-gradient(90deg,
            #d71920 0%,
            #2446a8 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==============================
   DESCRIPTION
================================ */

.services-description {
    max-width: 680px;

    margin: 25px auto 0;

    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;

    color: #555555;
}


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

@media (max-width: 768px) {

    .services-section {
        background-size: 22px 22px;
    }

    .services-title {
        font-size: 2.7rem;
        letter-spacing: -1px;
    }

    .services-description {
        font-size: 15px;
        line-height: 1.7;
        padding: 0 15px;
    }

    .services-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .label-line {
        width: 22px;
    }
}


@media (max-width: 480px) {

    .services-title {
        font-size: 2.2rem;
    }

    .services-description {
        font-size: 14px;
    }
}

.services {
    /* padding: 2rem 0rem;
    font-family: Poppins; */
    background-image: radial-gradient(lightgrey 1.3px, Whitesmoke 1.3px);
    background-size: 20px 20px;
}


.hr-line {
    border-top: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, White, DimGrey, White) border-box;
}

.tl-container {
    max-width: 1200px;
    margin: 0 auto;
}

.tl-card {
    scale: 0;
    opacity: 0;
    border: none;
    border-radius: 0;
    box-shadow: 0px 2px 12px 2px LightGrey;
    overflow: hidden;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 200px 350px;
    border-radius: 10px;
}

.left::before {
    scale: 0;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 200px 350px;
}

.right::before {
    scale: 0;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 200px 350px;
}

.origin-left {
    transform-origin: 0% 0%;
}

.origin-right {
    transform-origin: 100% 0%;
}

@keyframes fade-in {
    to {
        scale: 1;
        opacity: 1;
    }
}

.tl-img-container {
    width: 100%;
    height: 200px;
    filter: saturate(40%);
    transition: all 0.4s ease;
}

.tl-card:hover .scale {
    filter: saturate(100%);
    transform: scale(1.1);
}

.image-1 {
    background: url("../image/idea.webp") 50% 50% no-repeat;
    background-size: cover;
}

.image-2 {
    background: url("../image/map.webp") 50% 50% no-repeat;
    background-size: cover;
}

.image-3 {
    background: url("../image/writing.jpg") 50% 50% no-repeat;
    background-size: cover;
}

.image-4 {
    background: url("../image/website-img.jpg") 50% 50% no-repeat;
    background-size: cover;
}

.image-5 {
    background: url("../image/tech.jpg") 50% 50% no-repeat;
    background-size: cover;
}

/* The actual timeline (the vertical ruler) */
.main-timeline {
    position: relative;
}

/* Courses page card grid; the homepage keeps its timeline layout. */
.course-card-grid {
    columns: 4;
    column-gap: 24px;
}

.courses-page .tl-container {
    padding-inline: 1rem;
}

.course-card-grid::after {
    display: none;
}

.course-card-grid > .timeline {
    /* display: inline-block; */
    left: auto;
    width: 100%;
    padding: 3px;
    margin: 0 0 24px;
    vertical-align: top;
    break-inside: avoid;
}

.course-card-grid .tl-card {
    width: 100%;
}

.course-card-grid > .timeline::before,
.course-card-grid > .timeline::after {
    display: none;
}

@media (max-width: 991.98px) {
    .course-card-grid {
        columns: 3;
        column-gap: 20px;
    }
}

@media (min-width: 768px) and (hover: hover) {
    .course-card-grid {
        columns: 4;
        column-gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .course-card-grid {
        columns: 2;
        column-gap: 14px;
    }

    .courses-page .tl-container {
        padding-inline: 0;
    }
}

/* The actual timeline (the vertical ruler) */
.main-timeline::after {
    content: "";
    position: absolute;
    width: 0px;
    border: 1px dashed DarkGrey;
    background-color: none;
    top: 0;
    bottom: 0px;
    left: 50%;
    margin-left: -4px;
}

/* Container around content */
.timeline {
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the timeline */
.timeline::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 3px solid #f0f2f5;
    outline: 1px solid DarkGrey;
    right: -8px;
    background-color: DarkGrey;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.left {
    padding: 10px 40px 20px 0px;
    left: 0;
}

/* Place the container to the right */
.right {
    padding: 10px 0px 20px 40px;
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    position: absolute;
    top: 18px;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
    content: "";
    position: absolute;
    top: 18px;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -14px;
}

.accordion-button {
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    font-size: 18px;
    background-color: #efefef;
}

.accordion-button:not(.collapsed) {
    background-color: #C62E39;
    color: White;
}

.accordion-button:after {
    margin: 0;
    margin-left: 15px;
}

.accordion-button:not(.collapsed):after {
    filter: invert(100%) brightness(200%);
}

.accordion-item {
    border: none;
}

.card-footer {
    background-color: White;
    border-bottom: 5px solid white;
}

.icon-link {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid DimGrey;
    border-radius: 50%;
    margin: 0;
    transition: scale 0.3s ease;
    text-decoration: none;

    & i {
        color: DimGrey;
    }
}

@media (hover: hover) {
    .icon-link:hover {
        border: 1px solid DodgerBlue;
        scale: 1.15;
    }

    .icon-link:hover i {
        color: DodgerBlue;
    }
}

/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 700px) {

    /* Place the timelime to the left */
    .main-timeline::after {
        left: 10px;
    }

    /* Full-width containers */
    .timeline {
        width: 100%;
        padding-left: 40px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .timeline::before {
        left: 30px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: -4px;
    }

    .left::before {
        right: auto;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }

    .tl-card {
        transform-origin: 0% 0%;
    }
}


/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(120deg,
            #fffefd 0%,
            #f9e4d0 45%,
            #edb485 100%);
}


/* Subtle decorative glow */

.contact-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -150px;

    border-radius: 50%;

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

    filter: blur(20px);

    pointer-events: none;
}


/* =========================================
   LEFT CONTENT
========================================= */

.contact-intro {
    max-width: 520px;
}


/* Eyebrow */

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    color: #222;
}

.contact-eyebrow::before {
    content: "";

    width: 32px;
    height: 2px;

    background: #edb485;
}


/* Heading */

.contact-intro h2 {
    margin: 0;

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

    line-height: 1;

    font-weight: 800;

    letter-spacing: -3px;

    color: #111;
}

.contact-intro h2 span {
    display: block;

    color: #ed8c3c;
}


/* Description */

.contact-intro p {
    max-width: 470px;

    margin-top: 28px;

    font-size: 17px;

    line-height: 1.8;

    color: #555;
}


/* =========================================
   CONTACT NOTE
========================================= */

.contact-note {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 35px;

    font-size: 14px;
    font-weight: 500;

    color: #333;
}

.contact-note-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 18px;

    transition: transform 0.3s ease;
}

.contact-note:hover .contact-note-icon {
    transform: translateX(5px);
}


/* =========================================
   FORM CARD
========================================= */

.contact-form-card {
    position: relative;

    padding: 45px;

    border-radius: 24px;

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

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

    box-shadow:
        0 25px 70px rgba(70, 45, 25, 0.12);

    backdrop-filter: blur(15px);
}


/* =========================================
   FORM GROUP
========================================= */

.form-group {
    position: relative;
}

.form-group label {
    display: block;

    margin-bottom: 9px;

    font-size: 13px;

    font-weight: 600;

    color: #222;
}


/* Inputs */

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 15px 17px;

    border: 1px solid #dedede;

    border-radius: 10px;

    background: #fff;

    color: #222;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


/* Placeholder */

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}


/* Focus */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #edb485;

    box-shadow:
        0 0 0 4px rgba(237, 180, 133, 0.15);
}


/* Textarea */

.form-group textarea {
    resize: vertical;

    min-height: 140px;
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.contact-submit {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 7px 8px 7px 22px;

    border: none;

    border-radius: 50px;

    background: #111;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


/* Button icon */

.submit-icon {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edb485;

    color: #111;

    font-size: 20px;

    transition:
        transform 0.4s ease,
        background 0.3s ease;
}


/* Hover */

.contact-submit:hover {

    transform: translateY(-3px);

    background: #ed8c3c;

}


.contact-submit:hover .submit-icon {

    background: #fff;

    transform: rotate(-45deg);

}


/* Active */

.contact-submit:active {

    transform: translateY(-1px) scale(0.99);

}


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

@media (max-width: 991px) {

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

    .contact-intro {
        max-width: 700px;
        margin: 0 auto 20px;
        text-align: center;
    }

    .contact-intro p {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-eyebrow {
        justify-content: center;
    }

    .contact-note {
        justify-content: center;
    }
}


@media (max-width: 576px) {

    .contact-section {
        padding: 65px 0;
    }

    .contact-intro h2 {
        font-size: 3rem;

        letter-spacing: -2px;
    }

    .contact-intro p {
        font-size: 15px;
    }

    .contact-form-card {
        padding: 25px 20px;

        border-radius: 18px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px;
    }
}

/* =========================================
   TESTIMONIALS SECTION
========================================= */

.testimonials-section {
    position: relative;

    padding: 110px 0 100px;

    overflow: hidden;

    background: #fffefd;
}


/* =========================================
   HEADING
========================================= */

.testimonials-heading {
    max-width: 700px;

    margin: 0 auto 65px;

    padding: 0 20px;
}


.testimonials-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #222;
}


.testimonials-eyebrow::before {
    content: "";

    display: inline-block;

    width: 28px;
    height: 2px;

    margin-right: 10px;

    vertical-align: middle;

    background: #edb485;
}


.testimonials-heading h2 {
    margin: 0;

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

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 800;

    color: #111;
}


.testimonials-heading h2 span {
    display: block;

    color: #ed8c3c;
}


.testimonials-heading p {
    max-width: 570px;

    margin: 22px auto 0;

    font-size: 16px;

    line-height: 1.7;

    color: #666;
}


/* =========================================
   MARQUEE
========================================= */

.testimonial-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    margin-bottom: 22px;

    /* Fade edges */
    mask-image: linear-gradient(to right,
            transparent,
            black 5%,
            black 95%,
            transparent);

    -webkit-mask-image: linear-gradient(to right,
            transparent,
            black 5%,
            black 95%,
            transparent);
}


.testimonial-track {
    display: flex;

    width: max-content;

    gap: 22px;

    animation: testimonialScroll 45s linear infinite;

    will-change: transform;
}


/* Reverse row */

.testimonial-marquee-reverse .testimonial-track {
    animation-name: testimonialScrollReverse;

    animation-duration: 52s;
}


/* =========================================
   TESTIMONIAL CARD
========================================= */

.testimonial-card {
    flex: 0 0 390px;

    min-height: 235px;

    padding: 27px;

    border-radius: 18px;

    background: #111;

    color: #fff;

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

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


.testimonial-card-light {
    background: #fff;

    color: #111;

    border: 1px solid #e9e3dd;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.05);
}


/* =========================================
   CARD HOVER
========================================= */

.testimonial-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.12);
}


/* Pause marquee when hovering */

.testimonial-marquee:hover .testimonial-track {
    animation-play-state: paused;
}


/* =========================================
   TOP
========================================= */

.testimonial-top {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


/* =========================================
   AVATAR
========================================= */

.testimonial-avatar {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edb485;

    color: #111;

    font-size: 12px;

    font-weight: 700;
}


.testimonial-top h4 {
    margin: 0 0 3px;

    font-size: 14px;

    font-weight: 700;
}


.testimonial-top span {
    font-size: 11px;

    color: #999;
}


.testimonial-card-light .testimonial-top span {
    color: #777;
}


/* =========================================
   TESTIMONIAL TEXT
========================================= */

.testimonial-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #d5d5d5;
}


.testimonial-card-light p {
    color: #555;
}


/* =========================================
   STARS
========================================= */

.testimonial-stars {
    margin-top: 18px;

    font-size: 12px;

    letter-spacing: 3px;

    color: #edb485;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes testimonialScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


@keyframes testimonialScrollReverse {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

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


    .testimonials-heading {
        margin-bottom: 45px;
    }


    .testimonials-heading h2 {
        font-size: 2.6rem;

        letter-spacing: -1.5px;
    }


    .testimonials-heading p {
        font-size: 14px;
    }


    .testimonial-card {
        flex-basis: 320px;

        min-height: 220px;

        padding: 23px;
    }


    .testimonial-track {
        gap: 15px;

        animation-duration: 35s;
    }


    .testimonial-marquee-reverse .testimonial-track {
        animation-duration: 40s;
    }

}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .testimonial-track {
        animation: none;
    }
}

/* Blog article */
    .read-blog-page {
      --read-blog-ink: #17212d;
      --read-blog-muted: #697586;
      --read-blog-accent: #d47e38;
      --read-blog-line: #e9e5df;
      min-height: 60vh;
      padding: 145px 24px 110px;
      background:
        radial-gradient(ellipse at 50% 0, rgba(212, 126, 56, 0.08), transparent 42%),
        #fbfaf8;
      color: var(--read-blog-ink);
    }

    .reading-progress {
      position: fixed;
      z-index: 40;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      pointer-events: none;
    }

    .reading-progress span {
      display: block;
      width: 0;
      height: 100%;
      background: var(--read-blog-accent);
      transition: width 0.08s linear;
    }

    .read-blog-wrap {
      width: min(1120px, 100%);
      margin-inline: auto;
    }

    .read-blog-breadcrumb {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 34px;
      color: var(--read-blog-muted);
      font-size: 0.78rem;
    }

    .read-blog-breadcrumb a {
      color: inherit;
      text-decoration: none;
    }

    .read-blog-breadcrumb a:hover {
      color: var(--read-blog-accent);
    }

    .read-blog-breadcrumb i {
      font-size: 0.65rem;
    }

    .read-blog-header {
      max-width: 900px;
      margin: 0 auto 42px;
      text-align: center;
    }

    .read-blog-eyebrow {
      display: inline-block;
      margin-bottom: 14px;
      color: var(--read-blog-accent);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .read-blog-header h1 {
      margin: 0;
      font-family: "Host Grotesk", sans-serif;
      font-size: clamp(2.5rem, 6vw, 5.4rem);
      font-weight: 750;
      letter-spacing: -0.065em;
      line-height: 0.99;
      text-wrap: balance;
    }

    .read-blog-deck {
      max-width: 740px;
      margin: 24px auto 0;
      color: var(--read-blog-muted);
      font-size: clamp(1rem, 1.7vw, 1.22rem);
      line-height: 1.75;
    }

    .read-blog-byline {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 25px;
      color: var(--read-blog-muted);
      font-size: 0.8rem;
    }

    .read-blog-byline span:not(.byline-separator) {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .read-blog-byline i {
      color: var(--read-blog-accent);
    }

    .byline-separator {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #c3b9ad;
    }

    .read-blog-cover {
      width: min(1000px, 100%);
      max-height: 620px;
      overflow: hidden;
      margin: 0 auto 54px;
      border-radius: 22px;
      background: #e8e1d8;
      box-shadow: 0 28px 75px rgba(32, 31, 29, 0.12);
    }

    .read-blog-cover img,
    .read-blog-cover video {
      display: block;
      width: 100%;
      max-height: 620px;
      object-fit: cover;
    }

    .read-blog-layout {
      display: grid;
      grid-template-columns: 64px minmax(0, 740px);
      justify-content: center;
      gap: clamp(28px, 6vw, 84px);
      align-items: start;
    }

    .read-blog-rail {
      position: sticky;
      top: 36px;
    }

    .read-blog-tools {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .read-blog-tools-label {
      color: #9aa1aa;
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .read-blog-tool {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border: 1px solid var(--read-blog-line);
      border-radius: 50%;
      background: #fff;
      color: var(--read-blog-ink);
      cursor: pointer;
      transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .read-blog-tool:hover {
      transform: translateY(-2px);
      border-color: var(--read-blog-accent);
      color: var(--read-blog-accent);
    }

    .read-blog-tool-feedback {
      min-height: 1em;
      color: var(--read-blog-accent);
      font-size: 0.62rem;
      text-align: center;
    }

    .read-blog-article {
      min-width: 0;
      --article-font-size: 1.08rem;
    }

    .read-blog-article-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 20px;
      color: var(--read-blog-muted);
      font-size: 0.72rem;
    }

    .read-blog-article-tools button {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid var(--read-blog-line);
      border-radius: 9px;
      background: #fff;
      color: var(--read-blog-ink);
      cursor: pointer;
    }

    .read-blog-article-tools button:hover {
      border-color: var(--read-blog-accent);
      color: var(--read-blog-accent);
    }

    .read-blog-toc {
      margin: 0 0 34px;
      padding: 20px 24px;
      border: 1px solid var(--read-blog-line);
      border-radius: 14px;
      background: #fff;
    }

    .read-blog-toc summary {
      color: var(--read-blog-ink);
      font-size: 0.88rem;
      font-weight: 800;
      cursor: pointer;
    }

    .read-blog-toc ol {
      display: grid;
      gap: 10px;
      margin: 16px 0 0;
      padding-left: 22px;
    }

    .read-blog-toc li {
      padding-left: 4px;
      color: var(--read-blog-muted);
      font-size: 0.82rem;
    }

    .read-blog-toc li.toc-h3 {
      margin-left: 16px;
      font-size: 0.77rem;
    }

    .read-blog-toc a {
      color: inherit;
      text-decoration: none;
    }

    .read-blog-toc a:hover,
    .read-blog-toc a.is-current {
      color: var(--read-blog-accent);
    }

    .read-blog-content {
      color: #303945;
      font-size: var(--article-font-size);
      line-height: 1.9;
      overflow-wrap: anywhere;
    }

    .read-blog-content > :first-child {
      margin-top: 0;
    }

    .read-blog-content p {
      margin: 0 0 1.45em;
    }

    .read-blog-content h1,
    .read-blog-content h2,
    .read-blog-content h3,
    .read-blog-content h4,
    .read-blog-content h5 {
      scroll-margin-top: 34px;
      margin: 2em 0 0.7em;
      color: var(--read-blog-ink);
      font-family: "Host Grotesk", sans-serif;
      font-weight: 750;
      letter-spacing: -0.04em;
      line-height: 1.16;
    }

    .read-blog-content h1 {
      font-size: 2.1em;
    }

    .read-blog-content h2 {
      font-size: 1.75em;
    }

    .read-blog-content h3 {
      font-size: 1.4em;
    }

    .read-blog-content h4 {
      font-size: 1.2em;
    }

    .read-blog-content h5 {
      font-size: 1.08em;
    }

    .read-blog-content a {
      color: #a95c23;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .read-blog-content ul,
    .read-blog-content ol {
      margin: 0 0 1.5em;
      padding-left: 1.5em;
    }

    .read-blog-content li {
      margin: 0.4em 0;
      padding-left: 0.3em;
    }

    .read-blog-content blockquote {
      margin: 2em 0;
      padding: 8px 0 8px 22px;
      border-left: 3px solid var(--read-blog-accent);
      color: #586574;
      font-size: 1.15em;
      font-style: italic;
    }

    .read-blog-content img,
    .read-blog-content video {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 1.8em auto;
      border-radius: 14px;
    }

    .read-blog-tags {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 42px;
      padding-top: 22px;
      border-top: 1px solid var(--read-blog-line);
    }

    .read-blog-tags > span:first-child {
      margin-right: 4px;
      color: var(--read-blog-muted);
      font-size: 0.72rem;
      font-weight: 700;
    }

    .read-blog-tag {
      padding: 6px 11px;
      border: 1px solid var(--read-blog-line);
      border-radius: 999px;
      background: #fff;
      color: #536171;
      font-size: 0.7rem;
    }

    .read-blog-footer {
      display: flex;
      justify-content: center;
      margin: 48px 0 80px;
      padding-top: 28px;
      border-top: 1px solid var(--read-blog-line);
    }

    .read-blog-button {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 17px;
      border: 1px solid var(--read-blog-line);
      border-radius: 12px;
      background: #fff;
      color: var(--read-blog-ink);
      font-size: 0.8rem;
      font-weight: 700;
      text-decoration: none;
      transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .read-blog-button:hover {
      transform: translateY(-2px);
      border-color: var(--read-blog-accent);
      color: var(--read-blog-accent);
    }

    .read-blog-related {
      padding-top: 38px;
      border-top: 1px solid var(--read-blog-line);
    }

    .read-blog-related-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 25px;
    }

    .read-blog-related-heading .read-blog-eyebrow {
      margin-bottom: 8px;
    }

    .read-blog-related-heading h2 {
      margin: 0;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      font-weight: 750;
      letter-spacing: -0.05em;
    }

    .read-blog-related-heading > a {
      color: var(--read-blog-ink);
      font-size: 0.76rem;
      font-weight: 700;
      text-decoration: none;
    }

    .read-blog-related-heading > a:hover {
      color: var(--read-blog-accent);
    }

    .read-blog-related-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .read-blog-related-card {
      overflow: hidden;
      border: 1px solid var(--read-blog-line);
      border-radius: 15px;
      background: #fff;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .read-blog-related-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 38px rgba(32, 31, 29, 0.09);
    }

    .related-card-image,
    .related-card-placeholder {
      display: grid;
      height: 165px;
      place-items: center;
      overflow: hidden;
      background: #eee8df;
      color: #9a8168;
      font-size: 2rem;
    }

    .related-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.45s ease;
    }

    .read-blog-related-card:hover .related-card-image img {
      transform: scale(1.04);
    }

    .related-card-content {
      padding: 17px;
    }

    .related-card-content > span {
      color: var(--read-blog-accent);
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .related-card-content h3 {
      margin: 9px 0;
      font-size: 1rem;
      font-weight: 750;
      line-height: 1.3;
    }

    .related-card-content h3 a {
      color: var(--read-blog-ink);
      text-decoration: none;
    }

    .related-card-content h3 a:hover {
      color: var(--read-blog-accent);
    }

    .related-card-content p {
      margin: 0;
      color: var(--read-blog-muted);
      font-size: 0.76rem;
      line-height: 1.6;
    }

    .read-blog-not-found {
      width: min(720px, 100%);
      margin: 10vh auto;
      padding: 60px 24px;
      border: 1px solid var(--read-blog-line);
      border-radius: 22px;
      background: #fff;
      text-align: center;
    }

    .read-blog-not-found h1 {
      margin: 0;
      font-size: clamp(2rem, 6vw, 3.5rem);
      letter-spacing: -0.06em;
    }

    .read-blog-not-found p {
      margin: 15px 0 25px;
      color: var(--read-blog-muted);
    }

    @media (max-width: 760px) {
      .read-blog-page {
        padding: 120px 18px 70px;
      }

      .read-blog-cover {
        margin-bottom: 34px;
        border-radius: 15px;
      }

      .read-blog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
      }

      .read-blog-rail {
        position: static;
        order: 2;
      }

      .read-blog-tools {
        flex-direction: row;
        justify-content: center;
      }

      .read-blog-tool-feedback {
        min-width: 35px;
      }

      .read-blog-article {
        order: 1;
      }

      .read-blog-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 520px) {
      .read-blog-page {
        padding: 108px 15px 58px;
      }

      .read-blog-breadcrumb {
        margin-bottom: 24px;
      }

      .read-blog-header {
        margin-bottom: 30px;
        text-align: left;
      }

      .read-blog-deck {
        margin-top: 17px;
        font-size: 1rem;
      }

      .read-blog-byline {
        justify-content: flex-start;
      }

      .read-blog-article {
        --article-font-size: 1rem;
      }

      .read-blog-related-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .read-blog-related-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .related-card-image,
      .related-card-placeholder {
        height: 190px;
      }
    }

    @media print {
      .read-blog-page {
        padding: 0;
        background: #fff;
      }

      .pill-nav,
      .reading-progress,
      .read-blog-breadcrumb,
      .read-blog-rail,
      .read-blog-article-tools,
      .read-blog-footer,
      .read-blog-related,
      .dj-footer {
        display: none !important;
      }

      .read-blog-layout {
        display: block;
      }

      .read-blog-content {
        color: #000;
        font-size: 12pt;
      }
    }

/* =========================================================
   SERVICES PAGE
========================================================= */

.services-page,
.courses-page {
    --services-red: #d71920;
    --services-blue: #ed8c3c;

    --services-black: #111111;
    --services-muted: #686868;

    --services-border: rgba(0, 0, 0, 0.09);
}

.services-page {

    position: relative;

    overflow: hidden;

    background: #ffffff;

    color: var(--services-black);
}

.courses-page {
    color: var(--services-black);
    background: #ffffff;
}


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

.services-intro {
    position: relative;

    max-height: 60vh;

    display: flex;

    align-items: center;

    padding: clamp(72px, 10vh, 112px) 0 clamp(48px, 7vh, 80px);

    overflow: hidden;

    background-color: #ffffff;

    /*
   * Tiny black dots
   */
    /* background-image:
        radial-gradient(rgba(0, 0, 0, 0.14) 0.7px,
            transparent 0.7px);

    background-size: 20px 20px; */
}


.services-intro::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.9));
}


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

.services-intro-content {
    position: relative;

    z-index: 2;

    max-width: 950px;
}


.services-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: var(--services-red);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.services-eyebrow::before {
    content: "";

    width: 28px;

    height: 2px;

    background: var(--services-red);
}


/* =========================================================
   MAIN HEADLINE
========================================================= */

.services-title {
    margin: 0;

    max-width: 950px;

    font-size: clamp(2.75rem, 6vw, 5.5rem);

    line-height: 0.95;

    letter-spacing: -0.065em;

    font-weight: 800;
}


.services-title span {
    display: block;

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


/* =========================================================
   DESCRIPTION
========================================================= */

.services-description {
    max-width: 660px;

    margin: 34px 0 0;

    color: var(--services-muted);

    font-size: clamp(1rem,
            1.5vw,
            1.18rem);

    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   DECORATIVE ORBITS
========================================================= */

.services-orbit {
    position: absolute;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform;
}


.services-orbit-one {
    width: 190px;

    height: 190px;

    top: 18%;

    right: 7%;

    border: 1px solid rgba(23, 78, 166, 0.15);

    box-shadow:
        0 0 0 35px rgba(23, 78, 166, 0.025),
        0 0 0 70px rgba(23, 78, 166, 0.012);
}


.services-orbit-two {
    width: 85px;

    height: 85px;

    right: 30%;

    bottom: 12%;

    background: rgba(215, 25, 32, 0.045);

    border: 1px solid rgba(215, 25, 32, 0.12);
}


/* =========================================================
   SERVICES LIST SECTION
========================================================= */

.services-list-section {
    position: relative;

    padding: 30px 0 120px;

    background: #ffffff;

    /* background-image:
        radial-gradient(rgba(0, 0, 0, 0.12) 0.65px,
            transparent 0.65px);

    background-size: 20px 20px; */
}

.services-page {
    --services-red: #d71920;
    --services-blue: #ed8c3c;

    --services-black: #111111;
    --services-muted: #686868;
    --services-border: rgba(0, 0, 0, 0.09);

    position: relative;
    overflow: hidden;

    color: var(--services-black);

    background-color: #ffffff;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.07) 0.7px,
            transparent 0.7px);

    background-size:
        45px 45px,
        45px 45px,
        9px 9px;
}


/* =========================================================
   GRID
========================================================= */

.services-grid {
    display: grid;

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

    gap: 22px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {
    position: relative;

    grid-column: span 5;

    min-height: 500px;

    display: flex;

    flex-direction: column;

    padding: 34px;

    overflow: hidden;

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

    border-radius: 28px;

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

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.045);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;

    will-change: transform;
}


.service-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(23, 78, 166, 0.2);

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.09);
}

.services-page {
  --services-red: #d71920;
  --services-blue: #ed8c3c;

  --services-black: #111111;
  --services-muted: #686868;
  --services-border: rgba(0, 0, 0, 0.09);

  position: relative;
  overflow: hidden;

  color: var(--services-black);

  background-color: #ffffff;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.025) 1px,
      transparent 1px
    ),
    radial-gradient(
      rgba(0, 0, 0, 0.07) 0.7px,
      transparent 0.7px
    );

  background-size:
    45px 45px,
    45px 45px,
    9px 9px;
}


/* =========================================================
   WIDE CARDS
========================================================= */

.service-card-wide {
    grid-column: span 7;
}


/* =========================================================
   FEATURED CARD
========================================================= */

.service-card-featured {
    grid-column: span 5;

    color: #ffffff;

    background:
        var(--services-blue);

    border-color:
        var(--services-blue);

    box-shadow:
        0 20px 60px rgba(23, 78, 166, 0.18);
}


.service-card-featured:hover {
    border-color: var(--services-blue);

    box-shadow:
        0 30px 75px rgba(23, 78, 166, 0.25);
}


/* =========================================================
   CARD NUMBER
========================================================= */

.service-card-number {
    position: absolute;

    top: 30px;

    left: 34px;

    color: var(--services-blue);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.service-card-featured .service-card-number {
    color: rgba(255, 255, 255, 0.65);
}


/* =========================================================
   CARD ICON
========================================================= */

.service-card-icon {
    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    border-radius: 50%;

    color: var(--services-blue);

    background:
        rgba(23, 78, 166, 0.06);

    border:
        1px solid rgba(23, 78, 166, 0.12);

    font-size: 1.35rem;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.service-card:hover .service-card-icon {
    transform:
        rotate(-8deg) scale(1.08);

    background:
        rgba(23, 78, 166, 0.1);
}


.service-card-featured .service-card-icon {
    color: #ffffff;

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

    border-color:
        rgba(255, 255, 255, 0.18);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-card-content {
    flex: 1;

    margin-top: 55px;

    padding-right: 40px;
}


.service-category {
    display: block;

    margin-bottom: 12px;

    color: var(--services-red);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.service-card-featured .service-category {
    color: rgba(255, 255, 255, 0.7);
}


.service-card h2 {
    margin: 0 0 18px;

    font-size: clamp(1.8rem,
            3vw,
            2.7rem);

    line-height: 1.05;

    letter-spacing: -0.045em;

    font-weight: 800;
}


.service-card-content p {
    max-width: 650px;

    margin: 0 0 28px;

    color: var(--services-muted);

    font-size: 0.96rem;

    line-height: 1.75;
}


.service-card-featured .service-card-content p {
    color: rgba(255, 255, 255, 0.76);
}


/* =========================================================
   SERVICE ITEMS
========================================================= */

.service-items {
    display: flex;

    flex-wrap: wrap;

    gap: 9px 10px;
}


.service-items span {
    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border-radius: 100px;

    color: #333333;

    background: #f7f7f7;

    font-size: 0.76rem;

    font-weight: 600;
}


.service-card-featured .service-items span {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.1);
}


/* =========================================================
   ARROW BUTTON
========================================================= */

.service-arrow {
    position: absolute;

    right: 30px;

    bottom: 30px;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: var(--services-black);

    background: #ffffff;

    text-decoration: none;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}


.service-arrow:hover {
    transform:
        translate(4px, -4px);

    color: #ffffff;

    background:
        var(--services-red);

    border-color:
        var(--services-red);
}


.service-card-featured .service-arrow {
    color: #ffffff;

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

    border-color:
        rgba(255, 255, 255, 0.2);
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22,
            1,
            0.36,
            1);
}


.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

    .services-intro {
        max-height: 60vh;

        padding: clamp(76px, 10vh, 100px) 0 clamp(40px, 6vh, 60px);
    }


    .services-title {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }


    .service-card,
    .service-card-wide,
    .service-card-featured {
        grid-column: span 6;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    .services-intro {
        max-height: 60vh;

        padding: 72px 0 40px;
    }


    .services-title {
        font-size: clamp(2rem, 8vw, 3.2rem);

        line-height: 0.98;
    }


    .services-description {
        margin-top: 25px;

        font-size: 1rem;

        line-height: 1.7;
    }


    .services-list-section {
        padding:
            10px 0 80px;
    }


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

        gap: 16px;
    }


    .service-card,
    .service-card-wide,
    .service-card-featured {
        grid-column: auto;

        min-height: 470px;

        padding: 27px;
    }


    .service-card-number {
        left: 27px;

        top: 25px;
    }


    .service-card-content {
        margin-top: 45px;

        padding-right: 15px;
    }


    .service-card h2 {
        font-size: 2rem;
    }


    .service-items {
        flex-direction: column;

        align-items: flex-start;
    }


    .service-arrow {
        right: 25px;

        bottom: 25px;
    }


    .services-orbit-one {
        width: 120px;

        height: 120px;

        right: -35px;
    }


    .services-orbit-two {
        width: 60px;

        height: 60px;

        right: 20%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .services-title {
        font-size: 2.65rem;
    }


    .service-card {
        padding: 23px;
    }


    .service-card-number {
        left: 23px;
    }


    .service-card-icon {
        width: 52px;

        height: 52px;
    }


    .service-card h2 {
        font-size: 1.8rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .service-card,
    .service-card-icon,
    .service-arrow {
        transition: none;
    }

}


 .dj-footer {
     position: relative;
     overflow: hidden;

     padding: 70px 0 0;

     color: #ffffff;

     background:
         radial-gradient(circle at 10% 20%,
             rgba(53, 70, 157, 0.16),
             transparent 32%),
         radial-gradient(circle at 90% 80%,
             rgba(194, 32, 43, 0.10),
             transparent 30%),
         #080f1d;
 }

 /* =========================================================
   STUDIO SECTION
========================================================= */

 .studio-section {
     --studio-red: #d71920;
     --studio-blue: #ed8c3c;
     --studio-black: #111111;
     --studio-muted: #686868;
     --studio-border: rgba(0, 0, 0, 0.09);

     position: relative;
     overflow: hidden;

     color: var(--studio-black);

     background-color: #ffffff;

     /*
    Draft / blueprint background
  */

     background-image:
         linear-gradient(rgba(0, 0, 0, 0.025) 1px,
             transparent 1px),
         linear-gradient(90deg,
             rgba(0, 0, 0, 0.025) 1px,
             transparent 1px),
         radial-gradient(rgba(0, 0, 0, 0.065) 0.7px,
             transparent 0.7px);

     background-size:
         45px 45px,
         45px 45px,
         9px 9px;
 }


 /* =========================================================
   CONTAINER
========================================================= */

 .studio-container {
     width: min(1240px, calc(100% - 40px));
     margin: 0 auto;
 }


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

 .studio-intro {
     position: relative;

     padding: 150px 0 100px;

     text-align: center;
 }

 .studio-intro::before {
     content: "";

     position: absolute;
     inset: 0;

     pointer-events: none;

     background:
         radial-gradient(circle at 50% 20%,
             rgba(23, 78, 166, 0.06),
             transparent 35%);
 }

 .studio-intro>.studio-container {
     position: relative;
     z-index: 2;
 }


 /* =========================================================
   EYEBROW
========================================================= */

 .studio-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;

     margin-bottom: 25px;

     color: var(--studio-red);

     font-size: 0.75rem;
     font-weight: 800;

     letter-spacing: 0.18em;
     text-transform: uppercase;
 }

 .studio-eyebrow::before {
     content: "";

     width: 28px;
     height: 2px;

     background: var(--studio-red);
 }


 /* =========================================================
   MAIN TITLE
========================================================= */

 .studio-title {
     max-width: 1000px;

     margin: 0 auto;

     font-size: clamp(3rem, 7vw, 6.8rem);

     line-height: 0.94;

     letter-spacing: -0.065em;

     font-weight: 800;
 }

 .studio-title span {
     display: block;

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


 /* =========================================================
   DESCRIPTION
========================================================= */

 .studio-description {
     max-width: 700px;

     margin: 35px auto 0;

     color: var(--studio-muted);

     font-size: 1.05rem;

     line-height: 1.8;
 }


 /* =========================================================
   DIRECTORY
========================================================= */

 .studio-directory {
     position: relative;

     padding: 20px 0 140px;
 }


 /* =========================================================
   CATEGORY NAVIGATION
========================================================= */

 .studio-category-nav {
     position: sticky;

     top: 20px;

     z-index: 20;

     display: flex;
     align-items: stretch;

     margin-bottom: 70px;

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

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

     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);

     box-shadow:
         0 15px 50px rgba(0, 0, 0, 0.06);
 }


 /* =========================================================
   CATEGORY BUTTON
========================================================= */

 .studio-category-tab {
     position: relative;

     flex: 1;

     min-height: 78px;

     padding: 18px 22px;

     border: 0;

     border-right: 1px solid var(--studio-border);

     background: transparent;

     color: #555555;

     font: inherit;

     font-size: 0.85rem;

     font-weight: 700;

     text-align: left;

     cursor: pointer;

     transition:
         color 0.3s ease,
         background 0.3s ease;
 }

 .studio-category-tab:last-child {
     border-right: 0;
 }


 .studio-category-tab span {
     display: block;

     margin-bottom: 7px;

     color: #aaaaaa;

     font-size: 0.68rem;

     font-weight: 800;

     letter-spacing: 0.1em;

     transition: color 0.3s ease;
 }


 /* Bottom active indicator */

 .studio-category-tab::after {
     content: "";

     position: absolute;

     left: 0;
     right: 0;
     bottom: 0;

     height: 3px;

     background: transparent;

     transform: scaleX(0);

     transform-origin: left;

     transition:
         transform 0.35s ease,
         background 0.35s ease;
 }


 /* Hover */

 .studio-category-tab:hover {
     color: var(--studio-blue);

     background: rgba(23, 78, 166, 0.035);
 }

 .studio-category-tab:hover span {
     color: var(--studio-blue);
 }


 /* Active */

 .studio-category-tab.active {
     color: var(--studio-black);

     background: rgba(23, 78, 166, 0.045);
 }

 .studio-category-tab.active span {
     color: var(--studio-red);
 }

 .studio-category-tab.active::after {
     background: var(--studio-red);

     transform: scaleX(1);
 }


 /* =========================================================
   RESULTS
========================================================= */

 .studio-results {
     position: relative;
 }


 /* =========================================================
   PANELS
========================================================= */

 .studio-panel {
     display: none;

     opacity: 0;

     transform: translateY(25px);
 }

 .studio-panel.active {
     display: block;

     animation:
         studioPanelIn 0.55s ease forwards;
 }


 @keyframes studioPanelIn {

     from {
         opacity: 0;

         transform:
             translateY(25px);
     }

     to {
         opacity: 1;

         transform:
             translateY(0);
     }

 }


 /* =========================================================
   PANEL HEADING
========================================================= */

 .studio-panel-heading {
     display: grid;

     grid-template-columns:
         minmax(0, 1.25fr) minmax(280px, 0.75fr);

     gap: 80px;

     align-items: end;

     margin-bottom: 55px;
 }


 /* Number */

 .studio-panel-number {
     display: block;

     margin-bottom: 8px;

     color: var(--studio-red);

     font-size: 0.75rem;

     font-weight: 800;

     letter-spacing: 0.1em;
 }


 /* Category label */

 .studio-panel-label {
     display: block;

     margin-bottom: 20px;

     color: #888888;

     font-size: 0.72rem;

     font-weight: 800;

     letter-spacing: 0.15em;
 }


 /* Heading */

 .studio-panel-heading h2 {
     margin: 0;

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

     line-height: 0.98;

     letter-spacing: -0.055em;

     font-weight: 800;
 }

 .studio-panel-heading h2 span {
     color: var(--studio-blue);
 }


 /* Description */

 .studio-panel-heading>p {
     max-width: 520px;

     margin: 0;

     color: var(--studio-muted);

     font-size: 1rem;

     line-height: 1.8;
 }


 /* =========================================================
   SERVICE GRID
========================================================= */

 .studio-services-grid {
     display: grid;

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

     gap: 18px;
 }


 /* =========================================================
   SERVICE CARD
========================================================= */

 .studio-service-card {
     position: relative;

     min-height: 390px;

     padding: 34px;

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

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

     box-shadow:
         0 12px 45px rgba(0, 0, 0, 0.045);

     overflow: hidden;

     opacity: 0;

     transform: translateY(25px);

     transition:
         transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
         opacity 0.5s ease,
         box-shadow 0.4s ease,
         border-color 0.4s ease;
 }


 /* Top line */

 .studio-service-card::before {
     content: "";

     position: absolute;

     top: 0;
     left: 0;

     width: 100%;
     height: 3px;

     background: var(--studio-blue);

     transform: scaleX(0);

     transform-origin: left;

     transition: transform 0.4s ease;
 }


 /* Visible state */

 .studio-service-card.visible {
     opacity: 1;

     transform: translateY(0);
 }


 /* Hover */

 .studio-service-card.visible:hover {
     transform: translateY(-9px);

     border-color:
         rgba(23, 78, 166, 0.2);

     box-shadow:
         0 25px 65px rgba(0, 0, 0, 0.09);
 }

 .studio-service-card:hover::before {
     transform: scaleX(1);
 }


 /* =========================================================
   SERVICE ICON
========================================================= */

 .studio-service-icon {
     display: flex;

     align-items: center;
     justify-content: center;

     width: 54px;
     height: 54px;

     margin-bottom: 55px;

     border:
         1px solid rgba(23, 78, 166, 0.16);

     background:
         rgba(23, 78, 166, 0.06);

     color: var(--studio-blue);

     font-size: 1.3rem;
 }


 /* =========================================================
   SERVICE NUMBER
========================================================= */

 .studio-service-number {
     position: absolute;

     top: 34px;
     right: 34px;

     color: #bbbbbb;

     font-size: 0.7rem;

     font-weight: 800;

     letter-spacing: 0.1em;
 }


 /* =========================================================
   SERVICE TITLE
========================================================= */

 .studio-service-card h3 {
     max-width: 300px;

     margin: 0 0 15px;

     color: var(--studio-black);

     font-size: 1.5rem;

     line-height: 1.15;

     letter-spacing: -0.025em;

     font-weight: 750;
 }


 /* =========================================================
   SERVICE DESCRIPTION
========================================================= */

 .studio-service-card p {
     margin: 0;

     color: var(--studio-muted);

     font-size: 0.92rem;

     line-height: 1.75;
 }


 /* =========================================================
   SERVICE LINK
========================================================= */

 .studio-service-link {
     display: inline-flex;

     align-items: center;

     gap: 9px;

     margin-top: 28px;

     color: var(--studio-black);

     font-size: 0.78rem;

     font-weight: 800;

     text-decoration: none;

     text-transform: uppercase;

     letter-spacing: 0.06em;

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

 .studio-service-link i {
     color: var(--studio-red);

     transition:
         transform 0.3s ease;
 }

 .studio-service-link:hover {
     color: var(--studio-blue);

     gap: 13px;
 }

 .studio-service-link:hover i {
     transform:
         translate(2px, -2px);
 }


 /* =========================================================
   TABLET
========================================================= */

 @media (max-width: 1000px) {

     .studio-category-nav {
         overflow-x: auto;

         scrollbar-width: none;
     }

     .studio-category-nav::-webkit-scrollbar {
         display: none;
     }

     .studio-category-tab {
         flex: 0 0 190px;
     }

     .studio-panel-heading {
         grid-template-columns: 1fr;

         gap: 25px;
     }

     .studio-services-grid {
         grid-template-columns:
             repeat(2, 1fr);
     }

 }


 /* =========================================================
   MOBILE
========================================================= */

 @media (max-width: 650px) {

     .studio-container {
         width:
             min(calc(100% - 28px),
                 1240px);
     }


     .studio-intro {
         padding:
             110px 0 75px;
     }


     .studio-title {
         font-size:
             clamp(2.7rem,
                 13vw,
                 4.5rem);
     }


     .studio-description {
         font-size: 0.95rem;

         line-height: 1.7;
     }


     .studio-directory {
         padding-bottom: 90px;
     }


     .studio-category-nav {
         position: relative;

         top: 0;

         margin-bottom: 50px;
     }


     .studio-category-tab {
         flex: 0 0 175px;

         min-height: 72px;

         padding:
             15px 17px;

         font-size: 0.78rem;
     }


     .studio-panel-heading h2 {
         font-size:
             clamp(2.4rem,
                 12vw,
                 4rem);
     }


     .studio-panel-heading>p {
         font-size: 0.92rem;
     }


     .studio-services-grid {
         grid-template-columns: 1fr;
     }


     .studio-service-card {
         min-height: 350px;

         padding: 28px;
     }


     .studio-service-icon {
         margin-bottom: 45px;
     }

 }




 /* =========================================================
   BLOG SECTION
========================================================= */

.blog-section {
  --blog-red: #d71920;
  --blog-blue: #ed8c3c;
  --blog-black: #111111;
  --blog-muted: #686868;
  --blog-border: rgba(0, 0, 0, 0.09);

  position: relative;
  overflow: hidden;

  padding: 140px 0 150px;

  color: var(--blog-black);

  background-color: #ffffff;

  /*
    Draft / blueprint background
  */

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.025) 1px,
      transparent 1px
    ),
    radial-gradient(
      rgba(0, 0, 0, 0.065) 0.7px,
      transparent 0.7px
    );

  background-size:
    45px 45px,
    45px 45px,
    9px 9px;
}


/* =========================================================
   CONTAINER
========================================================= */

.blog-container {
  width: min(1240px, calc(100% - 40px));

  margin: 0 auto;
}


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

.blog-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, 0.8fr);

  gap: 80px;

  align-items: end;

  margin-bottom: 70px;
}


.blog-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 25px;

  color: var(--blog-red);

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.blog-eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: var(--blog-red);
}


.blog-title {
  max-width: 850px;

  margin: 0;

  font-size: clamp(
    3rem,
    6.5vw,
    6.2rem
  );

  line-height: 0.95;

  letter-spacing: -0.065em;

  font-weight: 800;
}


.blog-title span {
  display: block;

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


.blog-intro-description {
  max-width: 500px;

  margin: 0;

  color: var(--blog-muted);

  font-size: 1rem;

  line-height: 1.8;
}


/* =========================================================
   CATEGORY NAVIGATION
========================================================= */

.blog-category-nav {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 35px;

  padding-bottom: 14px;

  border-bottom:
    1px solid var(--blog-border);
}


.blog-category {
  position: relative;

  padding: 10px 18px;

  border: 0;

  background: transparent;

  color: #777777;

  font: inherit;

  font-size: 0.8rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    color 0.3s ease,
    background 0.3s ease;
}


.blog-category::after {
  content: "";

  position: absolute;

  left: 18px;
  right: 18px;
  bottom: -15px;

  height: 2px;

  background: transparent;

  transform: scaleX(0);

  transform-origin: left;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}


.blog-category:hover {
  color: var(--blog-blue);
}


.blog-category.active {
  color: var(--blog-black);

  background:
    rgba(23, 78, 166, 0.05);
}


.blog-category.active::after {
  background: var(--blog-red);

  transform: scaleX(1);
}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.blog-featured {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr);

  min-height: 530px;

  margin-bottom: 65px;

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

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

  box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.06);

  overflow: hidden;
}


.blog-featured-image {
  position: relative;

  min-height: 530px;

  overflow: hidden;
}


.blog-featured-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 65%,
      rgba(0, 0, 0, 0.08)
    );
}


.blog-featured-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 0.8s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    );
}

.blog-featured-image video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 530px;
  object-fit: cover;
  background: #111111;
}

.blog-media-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 240px;
  place-items: center;
  background: linear-gradient(135deg, #f4eee7, #e6ddd2);
  color: #8f7965;
  font-size: 3rem;
}

.blog-featured-image .blog-media-placeholder {
  min-height: 530px;
}

.blog-featured.blog-hidden {
  display: none;
}

.blog-empty-state {
  padding: 70px 24px;
  border: 1px solid var(--blog-border);
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.blog-empty-state > i {
  color: var(--blog-blue);
  font-size: 2rem;
}

.blog-empty-state h3 {
  margin: 14px 0 8px;
  font-size: 1.4rem;
  font-weight: 800;
}

.blog-empty-state p {
  margin: 0;
  color: var(--blog-muted);
}


.blog-featured:hover
.blog-featured-image img {
  transform: scale(1.04);
}


.blog-featured-badge {
  position: absolute;

  top: 25px;
  left: 25px;

  z-index: 2;

  padding: 9px 13px;

  background: var(--blog-red);

  color: #ffffff;

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.blog-featured-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 60px;
}


.blog-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 18px;

  margin-bottom: 25px;
}


.blog-meta span {
  color: #888888;

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.1em;
}


.blog-meta span:first-child {
  color: var(--blog-red);
}


.blog-featured-content h3 {
  max-width: 620px;

  margin: 0 0 22px;

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

  line-height: 1.02;

  letter-spacing: -0.045em;

  font-weight: 800;
}


.blog-featured-content p {
  max-width: 560px;

  margin: 0;

  color: var(--blog-muted);

  font-size: 0.98rem;

  line-height: 1.8;
}


/* =========================================================
   READ ARTICLE LINK
========================================================= */

.blog-read-link,
.blog-card-link,
.blog-view-all-link {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  width: fit-content;

  text-decoration: none;

  font-size: 0.76rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.08em;

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


.blog-read-link {
  margin-top: 35px;

  color: var(--blog-black);
}


.blog-read-link i,
.blog-card-link i,
.blog-view-all-link i {
  color: var(--blog-red);

  transition:
    transform 0.3s ease;
}


.blog-read-link:hover,
.blog-card-link:hover,
.blog-view-all-link:hover {
  color: var(--blog-blue);

  gap: 14px;
}


.blog-read-link:hover i,
.blog-card-link:hover i,
.blog-view-all-link:hover i {
  transform:
    translate(2px, -2px);
}


/* =========================================================
   BLOG GRID
========================================================= */

.blog-grid {
  display: grid;

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

  gap: 18px;
}


/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
  position: relative;

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

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

  overflow: hidden;

  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity 0.6s ease,
    transform 0.5s
      cubic-bezier(
        0.2,
        0.7,
        0.2,
        1
      ),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}


.blog-card.visible {
  opacity: 1;

  transform:
    translateY(0);
}


.blog-card.visible:hover {
  transform:
    translateY(-8px);

  border-color:
    rgba(23, 78, 166, 0.18);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   BLOG IMAGE
========================================================= */

.blog-card-image {
  display: block;

  height: 240px;

  overflow: hidden;
}


.blog-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 0.7s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    );
}

.blog-card-image video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.blog-card-image .blog-media-placeholder {
  min-height: 240px;
}


.blog-card:hover
.blog-card-image img {
  transform:
    scale(1.06);
}


/* =========================================================
   BLOG CARD CONTENT
========================================================= */

.blog-card-content {
  padding: 30px;
}


.blog-card-meta {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 18px;
}


.blog-card-meta span {
  color: #999999;

  font-size: 0.63rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.blog-card-meta span:first-child {
  color: var(--blog-red);
}


.blog-card h3 {
  margin: 0 0 14px;

  font-size: 1.45rem;

  line-height: 1.15;

  letter-spacing: -0.03em;

  font-weight: 800;
}


.blog-card p {
  margin: 0;

  color: var(--blog-muted);

  font-size: 0.88rem;

  line-height: 1.75;
}


.blog-card-link {
  margin-top: 25px;

  color: var(--blog-black);
}


/* =========================================================
   VIEW ALL
========================================================= */

.blog-view-all {
  display: flex;

  justify-content: center;

  margin-top: 60px;
}


.blog-view-all-link {
  padding:
    16px 24px;

  border:
    1px solid var(--blog-black);

  color: var(--blog-black);

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    gap 0.3s ease;
}


.blog-view-all-link:hover {
  border-color:
    var(--blog-blue);

  background:
    var(--blog-blue);

  color: #ffffff;
}


.blog-view-all-link:hover i {
  color: #ffffff;
}


/* =========================================================
   HIDDEN FILTERED POSTS
========================================================= */

.blog-card.blog-hidden {
  display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .blog-intro {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .blog-featured {
    grid-template-columns: 1fr;
  }


  .blog-featured-image {
    min-height: 420px;
  }


  .blog-featured-content {
    padding: 45px;
  }


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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .blog-section {
    padding:
      100px 0 100px;
  }


  .blog-container {
    width:
      min(
        calc(100% - 28px),
        1240px
      );
  }


  .blog-title {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4.5rem
      );
  }


  .blog-intro-description {
    font-size: 0.92rem;

    line-height: 1.7;
  }


  .blog-category-nav {
    overflow-x: auto;

    scrollbar-width: none;

    padding-bottom: 13px;
  }


  .blog-category-nav::-webkit-scrollbar {
    display: none;
  }


  .blog-category {
    flex:
      0 0 auto;

    white-space:
      nowrap;
  }


  .blog-featured {
    display: block;

    margin-bottom: 45px;
  }


  .blog-featured-image {
    min-height: 300px;
  }


  .blog-featured-content {
    padding: 30px;
  }


  .blog-featured-content h3 {
    font-size:
      2rem;
  }


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

    gap: 16px;
  }


  .blog-card-image {
    height: 230px;
  }


  .blog-card-content {
    padding: 27px;
  }

}



.about-page {
    --about-red: #d71920;
    --about-blue: #ed8c3c;
    --about-black: #111111;
    --about-muted: #686868;
    --about-border: rgba(0, 0, 0, 0.09);

    position: relative;
    overflow: hidden;
    color: var(--about-black);
    background-color: #ffffff;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.065) 0.7px,
            transparent 0.7px);

    background-size:
        45px 45px,
        45px 45px,
        9px 9px;
}

.about-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}


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

.about-hero {
    padding: 150px 0 90px;
    border-bottom: 1px solid var(--about-border);
}

.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 80px;
    align-items: end;
}

.about-eyebrow,
.about-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--about-red);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.about-eyebrow {
    margin-bottom: 28px;
}

.about-eyebrow::before,
.about-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--about-red);
}

.about-hero-title {
    max-width: 900px;
    margin: 0;

    font-size: clamp(4rem, 9vw, 8.5rem);
    line-height: 0.87;
    letter-spacing: -0.075em;
    font-weight: 800;
}

.about-hero-title span {
    display: block;
    color: var(--about-blue);
}

.about-hero-title strong {
    display: block;
    color: var(--about-black);
    font-weight: 800;
}

.about-hero-side {
    padding-bottom: 8px;
}

.about-hero-side p {
    max-width: 440px;
    margin: 0;

    color: var(--about-muted);

    font-size: 1rem;
    line-height: 1.85;
}

.about-scroll-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 35px;

    color: var(--about-black);
    text-decoration: none;

    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;

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

.about-scroll-link i {
    color: var(--about-red);
    transition: transform 0.3s ease;
}

.about-scroll-link:hover {
    color: var(--about-blue);
    gap: 16px;
}

.about-scroll-link:hover i {
    transform: translateY(4px);
}

.about-hero-line {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 100px;

    color: #999;

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.about-hero-line div {
    flex: 1;
    height: 1px;
    background: var(--about-border);
}


/* =========================================
   STORY
========================================= */

.about-story {
    padding: 140px 0;
}

.about-section-heading {
    display: grid;
    grid-template-columns: 0.35fr 1fr;
    gap: 60px;

    margin-bottom: 90px;
}

.about-section-heading h2 {
    max-width: 850px;
    margin: 0;

    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
    font-weight: 800;
}

.about-section-heading h2 span {
    display: block;
    color: var(--about-blue);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 0.35fr 1fr;
    gap: 60px;

    padding-top: 45px;
    border-top: 1px solid var(--about-border);
}

.about-story-number {
    color: var(--about-red);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.about-story-content {
    max-width: 800px;
}

.about-story-content p {
    margin: 0 0 28px;

    color: var(--about-muted);

    font-size: 1rem;
    line-height: 1.9;
}

.about-story-content p:last-child {
    margin-bottom: 0;
}

.about-story-content .about-lead {
    margin-bottom: 35px;

    color: var(--about-black);

    font-size: clamp(1.45rem, 2.3vw, 2.15rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
    font-weight: 500;
}


/* =========================================
   MISSION / VISION
========================================= */

.about-purpose {
    padding: 0 0 140px;
}

.about-purpose-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
}

.about-purpose-card {
    position: relative;

    min-height: 520px;
    padding: 45px;

    border: 1px solid var(--about-border);
    background: rgba(255, 255, 255, 0.82);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.about-purpose-card:hover {
    transform: translateY(-8px);

    border-color: rgba(23, 78, 166, 0.18);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.07);
}

.about-purpose-main {
    background:
        linear-gradient(135deg,
            rgba(215, 25, 32, 0.025),
            rgba(23, 78, 166, 0.045));
}

.about-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 22px;
    border-bottom: 1px solid var(--about-border);

    color: #888;

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.about-card-top span:first-child {
    color: var(--about-red);
}

.about-purpose-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 75px 0 30px;

    border: 1px solid rgba(23, 78, 166, 0.2);

    color: var(--about-blue);

    font-size: 1.4rem;
}

.about-purpose-card h3 {
    max-width: 650px;

    margin: 0 0 25px;

    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.about-purpose-card h3 span {
    color: var(--about-blue);
}

.about-purpose-card p {
    max-width: 650px;

    margin: 0;

    color: var(--about-muted);

    font-size: 0.94rem;
    line-height: 1.85;
}


/* =========================================
   APPROACH
========================================= */

.about-approach {
    padding: 140px 0;

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

.about-approach-heading {
    align-items: end;
    margin-bottom: 80px;
}

.about-approach-heading p {
    max-width: 460px;

    margin: 0;

    color: var(--about-muted);

    font-size: 0.95rem;
    line-height: 1.8;
}

.about-process {
    border-top: 1px solid var(--about-border);
}

.about-process-item {
    display: grid;
    grid-template-columns: 80px 70px 1fr;
    gap: 35px;
    align-items: center;

    padding: 38px 0;

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

    transition:
        padding 0.35s ease,
        background 0.35s ease;
}

.about-process-item:hover {
    padding-left: 18px;
    padding-right: 18px;

    background: rgba(23, 78, 166, 0.025);
}

.about-process-number {
    color: var(--about-red);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.about-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

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

    color: var(--about-blue);

    font-size: 1.15rem;

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

.about-process-item:hover .about-process-icon {
    background: var(--about-blue);
    border-color: var(--about-blue);
    color: #ffffff;
}

.about-process-content {
    display: grid;
    grid-template-columns: 0.45fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-process-content h3 {
    margin: 0;

    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.about-process-content p {
    max-width: 570px;

    margin: 0;

    color: var(--about-muted);

    font-size: 0.9rem;
    line-height: 1.8;
}


/* =========================================
   BELIEFS
========================================= */

.about-beliefs {
    padding: 140px 0;
}

.about-beliefs-header {
    max-width: 900px;
    margin-bottom: 80px;
}

.about-beliefs-header h2 {
    margin: 25px 0 0;

    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
    font-weight: 800;
}

.about-beliefs-header h2 span {
    display: block;
    color: var(--about-blue);
}

.about-beliefs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

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

.about-belief {
    min-height: 290px;
    padding: 35px 28px;

    border-right: 1px solid var(--about-border);
}

.about-belief:last-child {
    border-right: 0;
}

.about-belief-number {
    display: block;

    margin-bottom: 70px;

    color: var(--about-red);

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.about-belief h3 {
    margin: 0 0 14px;

    font-size: 1.35rem;
    letter-spacing: -0.025em;
    font-weight: 800;
}

.about-belief p {
    margin: 0;

    color: var(--about-muted);

    font-size: 0.84rem;
    line-height: 1.75;
}


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

.about-cta {
    padding: 40px 0 150px;
}

.about-cta-inner {
    position: relative;
    overflow: hidden;

    padding: 90px 70px;

    background: var(--about-black);
    color: #ffffff;
}

.about-cta-inner::before,
.about-cta-inner::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

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

    border-radius: 50%;

    pointer-events: none;
}

.about-cta-inner::before {
    right: -90px;
    top: -120px;
}

.about-cta-inner::after {
    right: 50px;
    bottom: -210px;
}

.about-cta-inner .about-label {
    position: relative;
    z-index: 1;
}

.about-cta-inner .about-label::before {
    background: var(--about-red);
}

.about-cta-inner h2 {
    position: relative;
    z-index: 1;

    max-width: 900px;

    margin: 28px 0 25px;

    font-size: clamp(3.2rem, 6vw, 6.5rem);
    line-height: 0.92;
    letter-spacing: -0.065em;
    font-weight: 800;
}

.about-cta-inner h2 span {
    display: block;
    color: #ffffff;
}

.about-cta-inner p {
    position: relative;
    z-index: 1;

    max-width: 550px;

    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.95rem;
    line-height: 1.8;
}

.about-cta-button {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 35px;
    padding: 16px 23px;

    background: var(--about-red);
    color: #ffffff;

    text-decoration: none;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        gap 0.3s ease;
}

.about-cta-button:hover {
    background: #b9151b;
    color: #ffffff;
    gap: 17px;
}

.about-cta-button i {
    transition: transform 0.3s ease;
}

.about-cta-button:hover i {
    transform: translate(2px, -2px);
}


/* =========================================
   REVEAL ANIMATION
========================================= */

.about-story,
.about-purpose,
.about-approach,
.about-beliefs,
.about-cta {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.about-page.about-loaded .about-story,
.about-page.about-loaded .about-purpose,
.about-page.about-loaded .about-approach,
.about-page.about-loaded .about-beliefs,
.about-page.about-loaded .about-cta {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-hero-title {
        max-width: 800px;
    }

    .about-section-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-purpose-grid {
        grid-template-columns: 1fr;
    }

    .about-purpose-card {
        min-height: auto;
    }

    .about-process-item {
        grid-template-columns: 60px 65px 1fr;
        gap: 25px;
    }

    .about-process-content {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .about-beliefs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-belief:nth-child(2) {
        border-right: 0;
    }

    .about-belief:nth-child(-n + 2) {
        border-bottom: 1px solid var(--about-border);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .about-container {
        width: min(calc(100% - 28px), 1240px);
    }

    .about-hero {
        padding: 100px 0 65px;
    }

    .about-hero-title {
        font-size: clamp(3.5rem, 17vw, 6rem);
    }

    .about-hero-side p {
        font-size: 0.92rem;
        line-height: 1.75;
    }

    .about-hero-line {
        margin-top: 65px;
    }

    .about-story,
    .about-approach,
    .about-beliefs {
        padding: 95px 0;
    }

    .about-purpose {
        padding-bottom: 95px;
    }

    .about-section-heading {
        margin-bottom: 55px;
    }

    .about-section-heading h2,
    .about-beliefs-header h2 {
        font-size: clamp(2.8rem, 13vw, 4.8rem);
    }

    .about-story-content .about-lead {
        font-size: 1.35rem;
    }

    .about-purpose-card {
        padding: 30px;
    }

    .about-purpose-icon {
        margin-top: 55px;
    }

    .about-purpose-card h3 {
        font-size: 2rem;
    }

    .about-process-item {
        grid-template-columns: 45px 55px 1fr;
        gap: 15px;
        padding: 30px 0;
    }

    .about-process-icon {
        width: 48px;
        height: 48px;
    }

    .about-process-content h3 {
        font-size: 1.4rem;
    }

    .about-process-content p {
        font-size: 0.82rem;
    }

    .about-beliefs-grid {
        grid-template-columns: 1fr;
    }

    .about-belief {
        min-height: auto;
        padding: 30px 20px;

        border-right: 0;
        border-bottom: 1px solid var(--about-border);
    }

    .about-belief:last-child {
        border-bottom: 0;
    }

    .about-belief-number {
        margin-bottom: 45px;
    }

    .about-cta {
        padding: 15px 0 100px;
    }

    .about-cta-inner {
        padding: 60px 30px;
    }

    .about-cta-inner h2 {
        font-size: clamp(2.8rem, 13vw, 4.8rem);
    }
}




 .dj-footer::before {
     content: "";

     position: absolute;

     width: 500px;
     height: 500px;

     top: -300px;
     left: -250px;

     border-radius: 50%;

     background: rgba(53, 70, 157, 0.08);

     filter: blur(100px);

     pointer-events: none;
 }

 .dj-footer::after {
     content: "";

     position: absolute;

     width: 400px;
     height: 400px;

     right: -200px;
     bottom: -250px;

     border-radius: 50%;

     background: rgba(194, 32, 43, 0.07);

     filter: blur(100px);

     pointer-events: none;
 }




 .dj-footer-social {
     position: relative;
     z-index: 2;

     display: flex;
     align-items: center;
     justify-content: center;

     gap: 20px;

     padding-bottom: 40px;
     margin-bottom: 55px;

     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }




 .dj-footer-social>span {
     display: flex;
     align-items: center;

     gap: 8px;

     color: #8f9aae;

     font-size: 14px;
     font-weight: 500;
 }

 .dj-footer-social>span i {
     color: #8292e8;
 }


 /* Social icons */

 .dj-social-icons {
     display: flex;

     gap: 10px;
 }

 .dj-social-icons a {
     width: 42px;
     height: 42px;

     display: flex;
     align-items: center;
     justify-content: center;

     color: #ffffff;

     text-decoration: none;

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

     border-radius: 50%;

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

     transition:
         transform 0.3s ease,
         background 0.3s ease,
         border-color 0.3s ease,
         color 0.3s ease;
 }

 .dj-social-icons a:hover {
     color: #ffffff;

     background: #35469d;

     border-color: #35469d;

     transform: translateY(-4px);
 }




 .dj-footer-section,
 .dj-newsletter {
     position: relative;
     z-index: 2;
 }


 /* Headings */

 .dj-footer-section h3,
 .dj-newsletter h3 {
     display: flex;
     align-items: center;

     gap: 10px;

     margin: 0 0 20px;

     color: #ffffff;

     font-size: 24px;
     font-weight: 700;

     letter-spacing: -0.5px;
 }

 .dj-footer-section h3 i {
     color: #8292e8;

     font-size: 19px;
 }




 .dj-footer-text {
     max-width: 380px;

     margin: 0 0 27px;

     color: #98a4b7;

     font-size: 15px;

     line-height: 1.8;
 }




 .dj-contact-item {
     display: flex;
     align-items: center;

     gap: 13px;

     margin-bottom: 18px;
 }


 /* Contact icon */

 .dj-contact-icon {
     width: 40px;
     height: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     color: #8292e8;

     background: rgba(53, 70, 157, 0.14);

     border: 1px solid rgba(53, 70, 157, 0.15);

     border-radius: 10px;

     transition:
         transform 0.3s ease,
         color 0.3s ease,
         background 0.3s ease;
 }

 .dj-contact-item:hover .dj-contact-icon {
     color: #ffffff;

     background: #35469d;

     transform: translateY(-2px);
 }


 /* Contact text */

 .dj-contact-item>div {
     display: flex;
     flex-direction: column;

     gap: 3px;
 }

 .dj-contact-item small {
     color: #647188;

     font-size: 11px;

     font-weight: 500;

     text-transform: uppercase;

     letter-spacing: 0.6px;
 }

 .dj-contact-item>div>span {
     color: #aab4c4;

     font-size: 14px;
 }


 /* Contact links */

 .dj-contact-item a {
     color: #aab4c4;

     font-size: 14px;

     text-decoration: none;

     transition: color 0.25s ease;
 }

 .dj-contact-item a:hover {
     color: #ffffff;
 }




 .dj-footer-links {
     display: flex;
     flex-direction: column;

     gap: 14px;

     padding: 0;
     margin: 0;

     list-style: none;
 }

 .dj-footer-links li {
     margin: 0;
 }


 /* Service link */

 .dj-footer-links a {
     display: flex;
     align-items: center;

     gap: 11px;

     color: #aab4c4;

     font-size: 14px;

     text-decoration: none;

     transition:
         transform 0.25s ease,
         color 0.25s ease;
 }


 /* Service icon */

 .dj-footer-links a i {
     width: 18px;

     color: #6678c8;

     font-size: 14px;

     transition: color 0.25s ease;
 }


 /* Hover */

 .dj-footer-links a:hover {
     color: #ffffff;

     transform: translateX(5px);
 }

 .dj-footer-links a:hover i {
     color: #8292e8;
 }




 .dj-newsletter {
     padding: 30px;

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

     border-radius: 18px;

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

     backdrop-filter: blur(12px);

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


 /* Newsletter icon */

 .dj-newsletter-icon {
     width: 46px;
     height: 46px;

     display: flex;
     align-items: center;
     justify-content: center;

     margin-bottom: 18px;

     color: #8292e8;

     background: rgba(53, 70, 157, 0.15);

     border: 1px solid rgba(53, 70, 157, 0.12);

     border-radius: 12px;
 }

 .dj-newsletter-icon i {
     font-size: 19px;
 }


 /* Newsletter heading */

 .dj-newsletter h3 {
     margin-bottom: 10px;

     font-size: 23px;
 }


 /* Newsletter description */

 .dj-newsletter p {
     margin: 0 0 22px;

     color: #98a4b7;

     font-size: 14px;

     line-height: 1.7;
 }




 .dj-newsletter-form {
     margin: 0 0 12px;
 }

 .dj-newsletter-input {
     position: relative;

     display: flex;
     align-items: center;

     width: 100%;
 }


 /* Email icon */

 .dj-newsletter-input>i {
     position: absolute;

     left: 15px;

     z-index: 2;

     color: #66748b;

     font-size: 15px;

     pointer-events: none;
 }


 /* Input */

 .dj-newsletter-input input {
     width: 100%;
     height: 48px;

     padding: 0 125px 0 43px;

     color: #ffffff;

     background: rgba(0, 0, 0, 0.18);

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

     border-radius: 9px;

     outline: none;

     font-size: 13px;

     transition:
         border-color 0.25s ease,
         background 0.25s ease,
         box-shadow 0.25s ease;
 }

 .dj-newsletter-input input::placeholder {
     color: #657287;
 }

 .dj-newsletter-input input:focus {
     color: #ffffff;

     background: rgba(0, 0, 0, 0.25);

     border-color: #35469d;

     box-shadow: 0 0 0 3px rgba(53, 70, 157, 0.12);
 }


 /* Subscribe button */

 .dj-newsletter-input button {
     position: absolute;

     right: 5px;

     height: 38px;

     display: flex;
     align-items: center;
     justify-content: center;

     gap: 7px;

     padding: 0 14px;

     color: #ffffff;

     background: #35469d;

     border: none;

     border-radius: 7px;

     font-size: 12px;

     font-weight: 600;

     cursor: pointer;

     transition:
         background 0.25s ease,
         transform 0.25s ease;
 }

 .dj-newsletter-input button:hover {
     background: #4358bd;

     transform: translateY(-1px);
 }


 /* Privacy text */

 .dj-newsletter small {
     display: flex;
     align-items: center;

     gap: 6px;

     color: #69768a;

     font-size: 12px;
 }

 .dj-newsletter small i {
     color: #6678c8;
 }




 .dj-footer-bottom {
     position: relative;
     z-index: 2;

     min-height: 85px;

     display: flex;
     align-items: center;
     justify-content: space-between;

     gap: 20px;

     margin-top: 60px;

     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }


 /* Copyright */

 .dj-footer-bottom p {
     display: flex;
     align-items: center;

     gap: 5px;

     margin: 0;

     color: #69768a;

     font-size: 13px;
 }

 .dj-footer-bottom p i {
     font-size: 12px;
 }

 .dj-footer-bottom strong {
     color: #aeb8c9;
 }


 /* Bottom links */

 .dj-footer-bottom-links {
     display: flex;
     align-items: center;

     gap: 25px;
 }

 .dj-footer-bottom-links a {
     display: flex;
     align-items: center;

     gap: 6px;

     color: #69768a;

     font-size: 13px;

     text-decoration: none;

     transition: color 0.25s ease;
 }

 .dj-footer-bottom-links a i {
     font-size: 12px;
 }

 .dj-footer-bottom-links a:hover {
     color: #ffffff;
 }




 @media (max-width: 991px) {

     .dj-footer {
         padding-top: 55px;
     }

     .dj-newsletter {
         margin-top: 10px;
     }

 }




 @media (max-width: 767px) {

     .dj-footer {
         padding-top: 50px;
     }


     /* Social */

     .dj-footer-social {
         flex-direction: column;

         gap: 15px;

         margin-bottom: 40px;

         padding-bottom: 30px;
     }


     /* Headings */

     .dj-footer-section h3,
     .dj-newsletter h3 {
         font-size: 21px;
     }


     /* Newsletter */

     .dj-newsletter {
         padding: 24px;
     }


     /* Newsletter input */

     .dj-newsletter-input {
         display: flex;
         flex-direction: column;

         align-items: stretch;

         gap: 10px;
     }

     .dj-newsletter-input>i {
         top: 24px;

         transform: translateY(-50%);
     }

     .dj-newsletter-input input {
         height: 48px;

         padding-right: 43px;
     }

     .dj-newsletter-input button {
         position: static;

         width: 100%;

         height: 46px;

         border-radius: 8px;
     }


     /* Footer bottom */

     .dj-footer-bottom {
         flex-direction: column;

         justify-content: center;

         gap: 15px;

         padding: 25px 0;

         text-align: center;
     }

     .dj-footer-bottom p {
         justify-content: center;

         flex-wrap: wrap;
     }


     .dj-footer-bottom-links {
         flex-wrap: wrap;

         justify-content: center;

         gap: 15px;
     }

 }



 @media (max-width: 400px) {

     .dj-footer {
         padding-top: 40px;
     }

     .dj-newsletter {
         padding: 20px;
     }

     .dj-contact-item {
         gap: 10px;
     }

     .dj-contact-icon {
         width: 37px;
         height: 37px;
     }

 }