@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;
}

/* 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;
    }

}

 .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;
 }




 .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;
     }

 }