/* =========================================================
   HOME PAGE
   قرارگاه تربیتی ولایت
========================================================= */

:root {

    --primary: #d24545;
    --primary-dark: #b93535;
    --primary-light: #fff1f1;

    --bg: #ffffff;
    --bg-soft: #fafafa;

    --text: #252525;
    --text-light: #707070;

    --border: #eeeeee;

    --shadow:
        0 20px 60px rgba(0, 0, 0, .07);

    --radius: 24px;

}


* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    direction: rtl;

    font-family: "Vazirmatn", sans-serif;

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

}


a {

    text-decoration: none;

    color: inherit;

}


button {

    font-family: inherit;

}


/* =========================================================
   BACKGROUND
========================================================= */

.bg-decoration {

    position: fixed;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    filter: blur(80px);

    opacity: .35;

}


.bg-decoration-1 {

    top: -250px;

    right: -200px;

    background: #ffdcdc;

}


.bg-decoration-2 {

    bottom: 5%;

    left: -300px;

    background: #ffe8e8;

}


.bg-decoration-3 {

    top: 45%;

    right: 40%;

    width: 250px;

    height: 250px;

    background: #fff0f0;

}


/* =========================================================
   HEADER
========================================================= */

.main-header {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    height: 84px;

    z-index: 1000;

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

    backdrop-filter: blur(18px);

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

    border-bottom: 1px solid transparent;

    transition: .3s ease;

}


.main-header.scrolled {

    height: 74px;

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

    border-bottom-color: #eeeeee;

    box-shadow: 0 8px 30px rgba(0, 0, 0, .06);

}


.header-container {

    width: min(1240px, 92%);

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.brand-logo {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.brand-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.brand-text {

    display: flex;

    flex-direction: column;

    gap: 1px;

}


.brand-text strong {

    font-size: 15px;

    font-weight: 800;

    color: var(--primary);

}


.brand-text span {

    font-size: 10px;

    color: #888;

}


/* =========================================================
   NAV
========================================================= */

.main-nav {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-right: auto;

}


.main-nav a {

    position: relative;

    padding: 10px 15px;

    color: #555;

    font-size: 13px;

    font-weight: 600;

    transition: .3s ease;

}


.main-nav a::after {

    content: "";

    position: absolute;

    bottom: 2px;

    right: 15px;

    width: 0;

    height: 2px;

    background: var(--primary);

    border-radius: 10px;

    transition: .3s ease;

}


.main-nav a:hover,
.main-nav a.active {

    color: var(--primary);

}


.main-nav a:hover::after,
.main-nav a.active::after {

    width: calc(100% - 30px);

}


/* =========================================================
   LOGIN
========================================================= */

.header-login {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 18px;

    border-radius: 13px;

    color: white;

    background: var(--primary);

    font-size: 12px;

    font-weight: 700;

    box-shadow: 0 8px 20px rgba(210, 69, 69, .18);

    transition: .3s ease;

}


.header-login:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(210, 69, 69, .25);

}


.header-login i {

    font-size: 11px;

}


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

.mobile-menu-button {

    display: none;

    width: 43px;

    height: 43px;

    border: 0;

    border-radius: 12px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 18px;

    cursor: pointer;

}


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

.mobile-menu {

    position: fixed;

    top: 84px;

    right: 4%;

    left: 4%;

    padding: 15px;

    background: white;

    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-15px);

    transition: .3s ease;

    z-index: 999;

}


.mobile-menu.open {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.mobile-menu a {

    display: block;

    padding: 13px 15px;

    border-radius: 12px;

    color: #555;

    font-size: 13px;

    font-weight: 600;

}


.mobile-menu a:hover {

    color: var(--primary);

    background: var(--primary-light);

}


.mobile-login {

    color: white !important;

    background: var(--primary);

    text-align: center;

    margin-top: 8px;

}


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

.hero {

    position: relative;

    min-height: 100vh;

    padding:
        150px
        5%
        80px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            #fff0f0 0,
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            #fff5f5 0,
            transparent 35%
        ),
        #fff;

}


.hero-container {

    width: min(1240px, 100%);

    margin: auto;

    display: grid;

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

    align-items: center;

    gap: 70px;

}


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

.hero-content {

    animation: heroContent .9s ease both;

}


@keyframes heroContent {

    from {

        opacity: 0;

        transform: translateX(40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    background: var(--primary-light);

    border: 1px solid #ffdada;

    color: var(--primary);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 600;

    margin-bottom: 24px;

}


.badge-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--primary);

    box-shadow:
        0 0 0 5px rgba(210, 69, 69, .12);

    animation: pulse 1.8s infinite;

}


@keyframes pulse {

    0%,
    100% {

        box-shadow:
            0 0 0 4px rgba(210, 69, 69, .12);

    }

    50% {

        box-shadow:
            0 0 0 9px rgba(210, 69, 69, .02);

    }

}


.hero h1 {

    font-size: clamp(44px, 5vw, 72px);

    line-height: 1.3;

    font-weight: 900;

    letter-spacing: -2px;

    color: #222;

    margin-bottom: 22px;

}


.hero h1 span {

    position: relative;

    color: var(--primary);

    display: inline-block;

}


.hero h1 span::after {

    content: "";

    position: absolute;

    right: 4px;

    bottom: -3px;

    width: 90%;

    height: 8px;

    background: #ffd5d5;

    border-radius: 50%;

    z-index: -1;

    transform: rotate(-2deg);

}


.hero-content > p {

    max-width: 650px;

    color: #707070;

    font-size: 16px;

    line-height: 2.25;

}


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

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;

}


.btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 24px;

    border-radius: 15px;

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;

}


.btn-primary {

    color: white;

    background: var(--primary);

    box-shadow:
        0 12px 30px rgba(210, 69, 69, .22);

}


.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(210, 69, 69, .28);

}


.btn-secondary {

    color: #444;

    border: 1px solid #e5e5e5;

    background: white;

}


.btn-secondary:hover {

    border-color: #ffd0d0;

    color: var(--primary);

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);

}


.btn-secondary i {

    color: var(--primary);

}


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

.hero-features {

    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 38px;

}


.hero-feature {

    display: flex;

    align-items: center;

    gap: 9px;

}


.feature-icon {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: var(--primary-light);

    color: var(--primary);

}


.hero-feature div:last-child {

    display: flex;

    flex-direction: column;

    gap: 1px;

}


.hero-feature strong {

    font-size: 11px;

}


.hero-feature span {

    font-size: 9px;

    color: #999;

}


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

.hero-visual {

    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.hero-glow {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(210, 69, 69, .17),
            rgba(210, 69, 69, 0)
        );

    filter: blur(10px);

    animation: glowMove 5s ease-in-out infinite;

}


@keyframes glowMove {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.12);

    }

}


/* =========================================================
   CIRCLES
========================================================= */

.hero-circle {

    position: absolute;

    border: 1px solid rgba(210, 69, 69, .13);

    border-radius: 50%;

}


.circle-large {

    width: 470px;

    height: 470px;

    animation: rotateCircle 25s linear infinite;

}


.circle-medium {

    width: 350px;

    height: 350px;

    border-style: dashed;

    animation:
        rotateCircleReverse
        20s
        linear
        infinite;

}


@keyframes rotateCircle {

    to {

        transform: rotate(360deg);

    }

}


@keyframes rotateCircleReverse {

    to {

        transform: rotate(-360deg);

    }

}


/* =========================================================
   LOGO CARD
========================================================= */

.logo-card {

    position: relative;

    width: 270px;

    height: 270px;

    border-radius: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff4f4
        );

    border: 1px solid rgba(210, 69, 69, .13);

    box-shadow:
        0 35px 80px rgba(210, 69, 69, .16),
        inset 0 0 40px rgba(255, 255, 255, .8);

    animation: floating 5s ease-in-out infinite;

    z-index: 3;

}


.logo-card::before {

    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 62px;

    border: 1px solid #ffe1e1;

}


.logo-card img {

    position: relative;

    width: 190px;

    height: 190px;

    object-fit: contain;

    z-index: 2;

}


.logo-card-glow {

    position: absolute;

    width: 160px;

    height: 160px;

    border-radius: 50%;

    background: #ffdede;

    filter: blur(45px);

    opacity: .65;

}


@keyframes floating {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 160px;

    padding: 12px;

    border-radius: 16px;

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

    backdrop-filter: blur(15px);

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

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .09);

    z-index: 5;

}


.floating-card-top {

    top: 90px;

    right: 5px;

    animation:
        floatTop
        4s
        ease-in-out
        infinite;

}


.floating-card-bottom {

    bottom: 85px;

    left: 0;

    animation:
        floatBottom
        4.5s
        ease-in-out
        infinite;

}


@keyframes floatTop {

    0%,
    100% {

        transform: translateY(0) rotate(2deg);

    }

    50% {

        transform: translateY(-12px) rotate(0);

    }

}


@keyframes floatBottom {

    0%,
    100% {

        transform: translateY(0) rotate(-2deg);

    }

    50% {

        transform: translateY(12px) rotate(0);

    }

}


.floating-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: var(--primary-light);

    color: var(--primary);

}


.floating-card > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.floating-card strong {

    font-size: 11px;

}


.floating-card span {

    color: #999;

    font-size: 8px;

}


/* =========================================================
   DOTS
========================================================= */

.decor-dot {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--primary);

}


.dot-1 {

    top: 120px;

    left: 80px;

    animation: dotFloat 3s infinite;

}


.dot-2 {

    top: 220px;

    right: 30px;

    width: 5px;

    height: 5px;

    animation: dotFloat 4s infinite;

}


.dot-3 {

    bottom: 160px;

    right: 80px;

    width: 6px;

    height: 6px;

    animation: dotFloat 3.5s infinite;

}


.dot-4 {

    bottom: 80px;

    left: 110px;

    width: 5px;

    height: 5px;

    animation: dotFloat 4.5s infinite;

}


@keyframes dotFloat {

    0%,
    100% {

        transform: translateY(0);

        opacity: .5;

    }

    50% {

        transform: translateY(-15px);

        opacity: 1;

    }

}


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

.scroll-down {

    position: absolute;

    bottom: 25px;

    right: 50%;

    transform: translateX(50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: #999;

    font-size: 9px;

    animation: scrollBounce 2s infinite;

}


.scroll-down i {

    color: var(--primary);

}


@keyframes scrollBounce {

    0%,
    100% {

        transform:
            translateX(50%)
            translateY(0);

    }

    50% {

        transform:
            translateX(50%)
            translateY(6px);

    }

}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.about-section,
.services-section,
.stats-section {

    padding: 120px 5%;

}


.section-container {

    width: min(1150px, 100%);

    margin: auto;

}


.section-heading {

    max-width: 720px;

    margin-bottom: 70px;

}


.section-heading.center {

    text-align: center;

    margin-right: auto;

    margin-left: auto;

}


.section-label {

    display: inline-block;

    color: var(--primary);

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 14px;

}


.section-heading h2 {

    font-size: clamp(28px, 4vw, 43px);

    line-height: 1.6;

    font-weight: 900;

    margin-bottom: 14px;

}


.section-heading h2 span {

    color: var(--primary);

}


.section-heading p {

    color: #777;

    line-height: 2;

    font-size: 14px;

}


/* =========================================================
   ABOUT
========================================================= */

.about-section {

    background: #fafafa;

}


.about-grid {

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 90px;

    align-items: center;

}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-image {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.about-image-bg {

    position: absolute;

    width: 370px;

    height: 370px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #fff,
            #ffe9e9
        );

    box-shadow:
        0 30px 70px rgba(210, 69, 69, .08);

}


.about-main-card {

    position: relative;

    width: 260px;

    height: 300px;

    border-radius: 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: white;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .1);

    z-index: 2;

}


.about-symbol {

    width: 100px;

    height: 100px;

    border-radius: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 42px;

    margin-bottom: 10px;

}


.about-main-card strong {

    font-size: 25px;

    color: var(--primary);

}


.about-main-card span {

    color: #999;

    font-size: 11px;

}


.about-mini-card {

    position: absolute;

    right: 10px;

    bottom: 45px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 13px 15px;

    border-radius: 14px;

    background: white;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .1);

    font-size: 10px;

}


.about-mini-card i {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #e9f9ee;

    color: #35a65a;

    font-size: 9px;

}


.mini-two {

    right: auto;

    left: 5px;

    bottom: 100px;

}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-content {

    display: flex;

    flex-direction: column;

    gap: 30px;

}


.about-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

}


.about-item-icon {

    flex-shrink: 0;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: white;

    color: var(--primary);

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

}


.about-item h3 {

    font-size: 15px;

    margin-bottom: 7px;

}


.about-item p {

    color: #777;

    font-size: 12px;

    line-height: 2;

}


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

.services-grid {

    display: grid;

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

    gap: 25px;

}


.service-card {

    position: relative;

    padding: 35px 30px;

    min-height: 340px;

    border-radius: 25px;

    background: white;

    border: 1px solid #eeeeee;

    overflow: hidden;

    transition: .4s ease;

}


.service-card::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 4px;

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: right;

    transition: .4s ease;

}


.service-card:hover {

    transform: translateY(-10px);

    border-color: #ffdede;

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

}


.service-card:hover::before {

    transform: scaleX(1);

}


.service-card.featured {

    background:
        linear-gradient(
            145deg,
            #d24545,
            #b93535
        );

    color: white;

    transform: translateY(-15px);

    box-shadow:
        0 25px 60px rgba(210, 69, 69, .22);

}


.service-card.featured:hover {

    transform: translateY(-23px);

}


.service-number {

    position: absolute;

    top: 20px;

    left: 25px;

    font-size: 12px;

    font-weight: 800;

    color: #ddd;

}


.featured .service-number {

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

}


.service-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 19px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 25px;

    margin-bottom: 25px;

}


.featured .service-icon {

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

    color: white;

}


.service-card h3 {

    font-size: 18px;

    margin-bottom: 12px;

}


.service-card p {

    color: #777;

    font-size: 12px;

    line-height: 2.1;

    margin-bottom: 25px;

}


.featured p {

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

}


.service-card a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-size: 11px;

    font-weight: 800;

}


.featured a {

    color: white;

}


.service-card a i {

    transition: .3s ease;

}


.service-card:hover a i {

    transform: translateX(-5px);

}


/* =========================================================
   STATS
========================================================= */

.stats-section {

    background: #fafafa;

}


.stats-heading {

    text-align: center;

    margin-bottom: 55px;

}


.stats-heading h2 {

    font-size: 32px;

    font-weight: 900;

}


.stats-grid {

    display: grid;

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

    gap: 20px;

}


.stat-box {

    text-align: center;

    padding: 35px 20px;

    border-radius: 22px;

    background: white;

    border: 1px solid #eeeeee;

    transition: .35s ease;

}


.stat-box:hover {

    transform: translateY(-8px);

    border-color: #ffdede;

    box-shadow:
        0 20px 40px rgba(210, 69, 69, .08);

}


.stat-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 17px;

    border-radius: 15px;

    background: var(--primary-light);

    color: var(--primary);

}


.stat-box strong {

    display: block;

    color: var(--primary);

    font-size: 38px;

    font-weight: 900;

    margin-bottom: 4px;

}


.stat-box span {

    color: #888;

    font-size: 11px;

}


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

.cta-section {

    padding: 100px 5%;

}


.cta-container {

    position: relative;

    width: min(1150px, 100%);

    min-height: 320px;

    margin: auto;

    padding: 60px;

    overflow: hidden;

    border-radius: 35px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            120deg,
            #d24545,
            #a92f2f
        );

    box-shadow:
        0 30px 70px rgba(210, 69, 69, .2);

}


.cta-content {

    position: relative;

    z-index: 2;

    max-width: 600px;

    color: white;

}


.cta-content .section-label {

    color: #ffdada;

}


.cta-content h2 {

    font-size: clamp(30px, 4vw, 45px);

    line-height: 1.5;

    font-weight: 900;

    margin-bottom: 10px;

}


.cta-content h2 span {

    color: #ffd4d4;

}


.cta-content p {

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

    font-size: 13px;

    line-height: 2;

    margin-bottom: 25px;

}


.btn-white {

    background: white;

    color: var(--primary);

}


.btn-white:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.15);

}


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

.cta-decoration {

    position: absolute;

    left: 40px;

    top: 50%;

    width: 400px;

    height: 400px;

    transform: translateY(-50%);

}


.cta-circle {

    position: absolute;

    width: 330px;

    height: 330px;

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

    border-radius: 50%;

    animation: rotateCircle 20s linear infinite;

}


.cta-decoration > i {

    position: absolute;

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

}


.cta-decoration > i:nth-child(2) {

    top: 80px;

    right: 70px;

    font-size: 30px;

}


.cta-decoration > i:nth-child(3) {

    bottom: 90px;

    left: 60px;

    font-size: 25px;

}


.cta-decoration > i:nth-child(4) {

    top: 180px;

    left: 150px;

    font-size: 40px;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background: #181818;

    color: white;

    padding: 55px 5% 20px;

}


.footer-container {

    width: min(1150px, 100%);

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 35px;

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

}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.footer-logo {

    width: 48px;

    height: 48px;

}


.footer-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.footer-brand > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.footer-brand strong {

    font-size: 13px;

}


.footer-brand span {

    color: #777;

    font-size: 9px;

}


.footer-links {

    display: flex;

    gap: 20px;

}


.footer-links a {

    color: #999;

    font-size: 10px;

    transition: .3s ease;

}


.footer-links a:hover {

    color: white;

}


.footer-social {

    display: flex;

    gap: 8px;

}


.footer-social a {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #242424;

    color: #aaa;

    transition: .3s ease;

}


.footer-social a:hover {

    background: var(--primary);

    color: white;

    transform: translateY(-3px);

}


.footer-bottom {

    width: min(1150px, 100%);

    margin: 20px auto 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #666;

    font-size: 8px;

}


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

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.show {

    opacity: 1;

    transform: translateY(0);

}


.service-card:nth-child(2) {

    transition-delay: .12s;

}


.service-card:nth-child(3) {

    transition-delay: .24s;

}


.stat-box:nth-child(2) {

    transition-delay: .1s;

}


.stat-box:nth-child(3) {

    transition-delay: .2s;

}


.stat-box:nth-child(4) {

    transition-delay: .3s;

}


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

@media (max-width: 1000px) {


    .main-nav {

        display: none;

    }


    .header-login {

        display: none;

    }


    .mobile-menu-button {

        display: block;

    }


    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .hero-content {

        display: flex;

        flex-direction: column;

        align-items: center;

    }


    .hero-visual {

        min-height: 480px;

        order: -1;

    }


    .hero-features {

        justify-content: center;

    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .services-grid {

        grid-template-columns: 1fr 1fr;

    }


    .service-card.featured {

        transform: none;

    }


    .stats-grid {

        grid-template-columns: 1fr 1fr;

    }


}


@media (max-width: 650px) {


    .main-header {

        height: 70px;

    }


    .brand-logo {

        width: 42px;

        height: 42px;

    }


    .brand-text strong {

        font-size: 12px;

    }


    .brand-text span {

        font-size: 8px;

    }


    .mobile-menu {

        top: 75px;

    }


    .hero {

        padding:
            110px
            20px
            60px;

    }


    .hero h1 {

        font-size: 42px;

        letter-spacing: -1px;

    }


    .hero-content > p {

        font-size: 13px;

    }


    .hero-buttons {

        width: 100%;

        flex-direction: column;

    }


    .btn {

        width: 100%;

    }


    .hero-features {

        width: 100%;

        gap: 12px;

        justify-content: space-between;

    }


    .hero-feature {

        flex-direction: column;

        text-align: center;

    }


    .hero-feature strong {

        font-size: 10px;

    }


    .hero-feature span {

        font-size: 8px;

    }


    .hero-visual {

        min-height: 390px;

    }


    .circle-large {

        width: 320px;

        height: 320px;

    }


    .circle-medium {

        width: 250px;

        height: 250px;

    }


    .logo-card {

        width: 190px;

        height: 190px;

        border-radius: 45px;

    }


    .logo-card img {

        width: 135px;

        height: 135px;

    }


    .floating-card {

        min-width: 130px;

        padding: 9px;

    }


    .floating-card-top {

        top: 45px;

        right: 0;

    }


    .floating-card-bottom {

        bottom: 35px;

        left: 0;

    }


    .about-section,
    .services-section,
    .stats-section {

        padding: 80px 20px;

    }


    .section-heading {

        margin-bottom: 45px;

    }


    .section-heading h2 {

        font-size: 28px;

    }


    .about-image {

        min-height: 350px;

    }


    .about-image-bg {

        width: 300px;

        height: 300px;

    }


    .about-main-card {

        width: 210px;

        height: 250px;

    }


    .about-mini-card {

        right: 0;

    }


    .mini-two {

        left: 0;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-card {

        min-height: 300px;

    }


    .stats-grid {

        grid-template-columns: 1fr 1fr;

        gap: 12px;

    }


    .stat-box {

        padding: 25px 10px;

    }


    .stat-box strong {

        font-size: 30px;

    }


    .cta-section {

        padding: 70px 20px;

    }


    .cta-container {

        padding: 40px 25px;

        min-height: 350px;

    }


    .cta-decoration {

        opacity: .5;

        left: -100px;

    }


    .footer {

        padding: 40px 20px 20px;

    }


    .footer-container {

        flex-direction: column;

        text-align: center;

    }


    .footer-links {

        flex-wrap: wrap;

        justify-content: center;

    }


    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

}


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

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }

}