/* =========================================================
   RABIE RIDGE INK HOUSE
   HEADER
   FUTURISTIC DARK THEME
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {
    --rr-black: #050505;
    --rr-black-2: #080808;
    --rr-dark: #101010;
    --rr-dark-2: #151515;

    --rr-white: #ffffff;
    --rr-white-soft: #eeeeee;

    --rr-grey: #8d8d8d;
    --rr-grey-light: #c8c8c8;
    --rr-grey-dark: #4a4a4a;

    --rr-red: #e10613;
    --rr-red-bright: #ff1724;
    --rr-red-dark: #a9000a;

    --rr-border: rgba(255, 255, 255, 0.09);

    --rr-display-font: "Orbitron", sans-serif;
    --rr-body-font: "Rajdhani", sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;

    background: var(--rr-black);

    color: var(--rr-white);

    font-family: var(--rr-body-font);

    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}


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

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background: rgba(5, 5, 5, 0.18);

    border-bottom: 1px solid transparent;

    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);

    transition:
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        backdrop-filter 0.45s ease;
}


/* =========================================================
   TOP RED LIGHT
   ========================================================= */

.site-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--rr-red-dark) 20%,
            var(--rr-red-bright) 50%,
            var(--rr-red-dark) 80%,
            transparent 100%
        );

    box-shadow:
        0 0 12px rgba(225, 6, 19, 0.65);

    opacity: 0.8;
}


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

.site-header.scrolled {
    background:
        rgba(5, 5, 5, 0.94);

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

    backdrop-filter:
        blur(22px);

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

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


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

.header-container {
    width:
        min(1440px, calc(100% - 80px));

    min-height:
        96px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        45px;
}


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

.brand {
    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

    color: var(--rr-white);

    text-decoration: none;

    isolation: isolate;
}


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

.brand-logo {
    position: relative;

    width: 60px;
    height: 60px;

    flex: 0 0 60px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #0d0d0d;

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

    isolation: isolate;

    transition:
        transform 0.5s cubic-bezier(.16, 1, .3, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   ORBIT RING 1
   CONTINUOUS FOREVER
   ========================================================= */

.brand-logo::before {
    content: "";

    position: absolute;

    inset: -6px;

    width: calc(100% + 12px);
    height: calc(100% + 12px);

    border-radius: 50%;

    padding: 2px;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 18deg,

            #ff1724 42deg,
            #ff1724 58deg,
            #e10613 78deg,

            transparent 105deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation:
        orbitOne 2.4s linear infinite;

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   ORBIT RING 2
   CONTINUOUS FOREVER
   ========================================================= */

.brand-logo::after {
    content: "";

    position: absolute;

    inset: -10px;

    width: calc(100% + 20px);
    height: calc(100% + 20px);

    border-radius: 50%;

    padding: 2px;

    background:
        conic-gradient(
            from 0deg,

            transparent 0deg,
            transparent 190deg,

            #ff1724 215deg,
            #ff1724 232deg,
            #e10613 252deg,

            transparent 280deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation:
        orbitTwo 2.4s linear infinite;

    pointer-events: none;

    z-index: -2;
}


/* =========================================================
   ORBIT ANIMATION 1
   ========================================================= */

@keyframes orbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   ORBIT ANIMATION 2
   ========================================================= */

@keyframes orbitTwo {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   LOGO IMAGE
   ========================================================= */

.brand-logo img {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    z-index: 2;

    transition:
        transform 0.6s cubic-bezier(.16, 1, .3, 1),
        filter 0.4s ease;
}


/* =========================================================
   LOGO HOVER
   ========================================================= */

.brand:hover .brand-logo {
    transform: scale(1.07);

    border-color:
        rgba(225, 6, 19, 0.8);

    box-shadow:
        0 0 12px rgba(225, 6, 19, 0.35),
        0 0 35px rgba(225, 6, 19, 0.2);
}

.brand:hover .brand-logo img {
    transform: scale(1.08);

    filter:
        contrast(1.08);
}


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

.brand-text {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    min-width: 0;
}


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

.brand-name {
    display: block;

    color: var(--rr-white);

    font-family:
        var(--rr-display-font);

    font-size:
        0.95rem;

    font-weight:
        900;

    line-height:
        1.1;

    letter-spacing:
        0.08em;

    white-space:
        nowrap;

    transition:
        color 0.3s ease;
}


/* =========================================================
   TAGLINE
   ========================================================= */

.brand-tagline {
    display: block;

    color:
        #777777;

    font-family:
        var(--rr-body-font);

    font-size:
        0.62rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.20em;

    white-space:
        nowrap;

    transition:
        color 0.3s ease;
}


.brand:hover .brand-name {
    color:
        var(--rr-red-bright);
}


.brand:hover .brand-tagline {
    color:
        #c2c2c2;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.desktop-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        34px;

    margin-left:
        auto;
}


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

.desktop-nav a {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    height:
        96px;

    color:
        #999999;

    text-decoration:
        none;

    font-family:
        var(--rr-display-font);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    white-space:
        nowrap;

    transition:
        color 0.3s ease;
}


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

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

    position:
        absolute;

    left:
        0;

    bottom:
        25px;

    width:
        100%;

    height:
        2px;

    background:
        var(--rr-red-bright);

    box-shadow:
        0 0 10px rgba(225, 6, 19, 0.8),
        0 0 20px rgba(225, 6, 19, 0.3);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform 0.35s cubic-bezier(.16, 1, .3, 1);
}


.desktop-nav a:hover {
    color:
        var(--rr-white);
}


.desktop-nav a:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}


/* =========================================================
   HEADER BOOK BUTTON
   ========================================================= */

.header-book {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        49px;

    padding:
        0 22px;

    color:
        #ffffff;

    background:
        var(--rr-red);

    border:
        1px solid var(--rr-red-bright);

    border-radius:
        4px;

    text-decoration:
        none;

    font-family:
        var(--rr-display-font);

    font-size:
        0.59rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    overflow:
        hidden;

    isolation:
        isolate;

    box-shadow:
        0 0 8px rgba(225, 6, 19, 0.55),
        0 0 22px rgba(225, 6, 19, 0.25);

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


/* =========================================================
   BOOK SHINE
   ========================================================= */

.header-book::before {
    content:
        "";

    position:
        absolute;

    top:
        -30%;

    left:
        -130%;

    width:
        60%;

    height:
        160%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        bookShine 3s ease-in-out infinite;

    z-index:
        -1;

    pointer-events:
        none;
}


@keyframes bookShine {

    0% {
        left:
            -130%;
    }

    35% {
        left:
            150%;
    }

    100% {
        left:
            150%;
    }

}


/* =========================================================
   BOOK ARROW
   ========================================================= */

.header-book-arrow {
    font-size:
        1rem;

    transition:
        transform 0.3s ease;
}


.header-book:hover {
    transform:
        translateY(-3px);

    background:
        var(--rr-red-bright);

    border-color:
        #ff4a52;

    box-shadow:
        0 0 8px rgba(255, 23, 36, 1),
        0 0 20px rgba(255, 23, 36, 0.85),
        0 0 45px rgba(225, 6, 19, 0.6),
        0 12px 35px rgba(225, 6, 19, 0.35);
}


.header-book:hover .header-book-arrow {
    transform:
        translate(3px, -3px);
}


.header-book:active {
    transform:
        translateY(-1px) scale(0.98);
}


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

.mobile-menu-toggle {
    display:
        none;

    position:
        relative;

    width:
        52px;

    height:
        52px;

    margin-left:
        auto;

    padding:
        0;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    border:
        1px solid #555555;

    border-radius:
        50%;

    background:
        #292929;

    cursor:
        pointer;

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


/* =========================================================
   HAMBURGER LINES
   ========================================================= */

.mobile-menu-toggle span {
    display:
        block;

    width:
        20px;

    height:
        2px;

    border-radius:
        999px;

    background:
        #dddddd;

    transition:
        transform 0.4s cubic-bezier(.16, 1, .3, 1),
        opacity 0.25s ease,
        background 0.3s ease;
}


.mobile-menu-toggle:hover {
    transform:
        scale(1.06);

    background:
        #333333;

    border-color:
        var(--rr-red);

    box-shadow:
        0 0 10px rgba(225, 6, 19, 0.35),
        0 0 25px rgba(225, 6, 19, 0.15);
}


/* =========================================================
   ACTIVE HAMBURGER
   ========================================================= */

.mobile-menu-toggle.active {
    background:
        var(--rr-red);

    border-color:
        var(--rr-red-bright);

    box-shadow:
        0 0 12px rgba(225, 6, 19, 0.55),
        0 0 25px rgba(225, 6, 19, 0.25);
}


.mobile-menu-toggle.active span {
    background:
        #ffffff;
}


.mobile-menu-toggle.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-toggle.active span:nth-child(2) {
    opacity:
        0;

    transform:
        scaleX(0);
}


.mobile-menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.mobile-navigation {
    position:
        fixed;

    top:
        96px;

    left:
        0;

    width:
        100%;

    height:
        calc(100dvh - 96px);

    background:
        rgba(5, 5, 5, 0.98);

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

    backdrop-filter:
        blur(25px);

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

    overflow-y:
        auto;

    overflow-x:
        hidden;

    visibility:
        hidden;

    opacity:
        0;

    transform:
        translateY(-25px);

    pointer-events:
        none;

    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(.16, 1, .3, 1),
        visibility 0.35s ease;
}


.mobile-navigation.active {
    visibility:
        visible;

    opacity:
        1;

    transform:
        translateY(0);

    pointer-events:
        auto;
}


/* =========================================================
   MOBILE NAV INNER
   ========================================================= */

.mobile-navigation-inner {
    width:
        calc(100% - 40px);

    max-width:
        700px;

    margin:
        0 auto;

    padding:
        34px 0 50px;
}


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

.mobile-nav-label {
    margin-bottom:
        20px;

    color:
        var(--rr-red-bright);

    font-family:
        var(--rr-display-font);

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.22em;
}


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

.mobile-nav-link {
    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    width:
        100%;

    padding:
        21px 0;

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

    color:
        #a8a8a8;

    text-decoration:
        none;

    font-family:
        var(--rr-display-font);

    font-size:
        clamp(1.35rem, 6vw, 2.2rem);

    font-weight:
        800;

    letter-spacing:
        0.025em;

    opacity:
        0;

    transform:
        translateX(-25px);

    transition:
        color 0.3s ease,
        opacity 0.45s ease,
        transform 0.45s cubic-bezier(.16, 1, .3, 1);
}


.mobile-navigation.active .mobile-nav-link {
    opacity:
        1;

    transform:
        translateX(0);
}


.mobile-nav-link:nth-child(2) {
    transition-delay:
        0.04s;
}


.mobile-nav-link:nth-child(3) {
    transition-delay:
        0.08s;
}


.mobile-nav-link:nth-child(4) {
    transition-delay:
        0.12s;
}


.mobile-nav-link:nth-child(5) {
    transition-delay:
        0.16s;
}


.mobile-nav-link:nth-child(6) {
    transition-delay:
        0.20s;
}


.mobile-nav-link:nth-child(7) {
    transition-delay:
        0.24s;
}


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

.mobile-nav-link span {
    min-width:
        27px;

    color:
        #555555;

    font-family:
        var(--rr-body-font);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    transition:
        color 0.3s ease;
}


.mobile-nav-link:hover {
    color:
        var(--rr-white);
}


.mobile-nav-link:hover span {
    color:
        var(--rr-red-bright);
}


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

.mobile-nav-cta {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    margin-top:
        30px;

    padding:
        20px 22px;

    color:
        #ffffff;

    background:
        var(--rr-red);

    border:
        1px solid var(--rr-red-bright);

    border-radius:
        4px;

    text-decoration:
        none;

    font-family:
        var(--rr-display-font);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.10em;

    overflow:
        hidden;

    isolation:
        isolate;

    box-shadow:
        0 0 10px rgba(225, 6, 19, 0.5),
        0 0 25px rgba(225, 6, 19, 0.2);

    opacity:
        0;

    transform:
        translateY(15px);

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


.mobile-navigation.active .mobile-nav-cta {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   MOBILE CTA SHINE
   ========================================================= */

.mobile-nav-cta::before {
    content:
        "";

    position:
        absolute;

    top:
        -30%;

    left:
        -130%;

    width:
        60%;

    height:
        160%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        mobileBookShine 3s ease-in-out infinite;

    z-index:
        -1;
}


@keyframes mobileBookShine {

    0% {
        left:
            -130%;
    }

    35% {
        left:
            150%;
    }

    100% {
        left:
            150%;
    }

}


.mobile-nav-cta:hover {
    box-shadow:
        0 0 10px rgba(255, 23, 36, 1),
        0 0 25px rgba(255, 23, 36, 0.7),
        0 0 50px rgba(225, 6, 19, 0.4);
}


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

@media (max-width: 1150px) {

    .header-container {
        width:
            calc(100% - 50px);

        gap:
            28px;
    }


    .desktop-nav {
        gap:
            22px;
    }


    .desktop-nav a {
        font-size:
            0.55rem;

        letter-spacing:
            0.10em;
    }


    .header-book {
        padding:
            0 17px;
    }

}


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

@media (max-width: 900px) {

    .header-container {
        width:
            calc(100% - 32px);

        min-height:
            82px;
    }


    .desktop-nav,
    .header-book {
        display:
            none;
    }


    .mobile-menu-toggle {
        display:
            flex;
    }


    /* Larger mobile logo */

    .brand-logo {
        width:
            53px;

        height:
            53px;

        flex-basis:
            53px;
    }


    /* Larger mobile brand */

    .brand-name {
        font-size:
            0.86rem;

        letter-spacing:
            0.075em;
    }


    /* Hide tagline */

    .brand-tagline {
        display:
            none;
    }


    .mobile-navigation {
        top:
            82px;

        height:
            calc(100dvh - 82px);
    }

}


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

@media (max-width: 480px) {

    .header-container {
        width:
            calc(100% - 22px);

        min-height:
            80px;
    }


    .brand {
        gap:
            11px;

        min-width:
            0;
    }


    .brand-logo {
        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;
    }


    .brand-name {
        font-size:
            0.78rem;

        line-height:
            1.08;

        letter-spacing:
            0.065em;
    }


    .brand-tagline {
        display:
            none;
    }


    .mobile-menu-toggle {
        width:
            47px;

        height:
            47px;

        flex-shrink:
            0;
    }


    .mobile-navigation {
        top:
            80px;

        height:
            calc(100dvh - 80px);
    }


    .mobile-navigation-inner {
        width:
            calc(100% - 30px);
    }


    .mobile-nav-link {
        font-size:
            1.25rem;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .header-container {
        width:
            calc(100% - 18px);
    }


    .brand {
        gap:
            9px;
    }


    .brand-logo {
        width:
            47px;

        height:
            47px;

        flex-basis:
            47px;
    }


    .brand-name {
        font-size:
            0.70rem;

        letter-spacing:
            0.05em;
    }


    .mobile-menu-toggle {
        width:
            44px;

        height:
            44px;
    }


    .mobile-menu-toggle span {
        width:
            18px;
    }

}


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

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

    .brand-logo::before,
    .brand-logo::after,
    .header-book::before,
    .mobile-nav-cta::before {
        animation:
            none;
    }

    *,
    *::before,
    *::after {
        transition:
            none !important;
    }

}

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

.brand-logo {
    position: relative;

    width: 60px;
    height: 60px;

    flex: 0 0 60px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #0d0d0d;

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

    isolation: isolate;

    z-index: 2;

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


/* =========================================================
   MOVING RED LINE #1
   ========================================================= */

.brand-logo::before {
    content: "";

    position: absolute;

    top: -7px;
    left: -7px;

    width: calc(100% + 14px);
    height: calc(100% + 14px);

    border-radius: 50%;

    background: conic-gradient(
        from 0deg,

        transparent 0deg,
        transparent 10deg,

        #ff1724 25deg,
        #ff1724 65deg,
        #e10613 82deg,

        transparent 100deg,
        transparent 360deg
    );

    padding: 2px;

    /*
       CUT THE CENTER OUT
       SO ONLY THE OUTER LINE IS VISIBLE
    */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    /*
       THIS IS THE IMPORTANT PART:
       THE RED STROKE ITSELF ROTATES
    */
    animation:
        logoOrbitOne 1.8s linear infinite;

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   MOVING RED LINE #2
   ========================================================= */

.brand-logo::after {
    content: "";

    position: absolute;

    top: -11px;
    left: -11px;

    width: calc(100% + 22px);
    height: calc(100% + 22px);

    border-radius: 50%;

    background: conic-gradient(
        from 0deg,

        transparent 0deg,
        transparent 190deg,

        #ff1724 210deg,
        #ff1724 250deg,
        #e10613 268deg,

        transparent 285deg,
        transparent 360deg
    );

    padding: 2px;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    /*
       SECOND LINE MOVES IN THE SAME DIRECTION
    */
    animation:
        logoOrbitTwo 1.8s linear infinite;

    pointer-events: none;

    z-index: -2;
}


/* =========================================================
   ORBIT 1
   ========================================================= */

@keyframes logoOrbitOne {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


/* =========================================================
   ORBIT 2
   ========================================================= */

@keyframes logoOrbitTwo {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


/* =========================================================
   LOGO IMAGE
   ========================================================= */

.brand-logo img {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    z-index: 3;

    transition:
        transform 0.5s cubic-bezier(.16, 1, .3, 1),
        filter 0.35s ease;
}


/* =========================================================
   LOGO HOVER
   ========================================================= */

.brand:hover .brand-logo {
    transform: scale(1.06);

    border-color:
        rgba(255, 23, 36, 0.8);

    box-shadow:
        0 0 10px rgba(255, 23, 36, 0.45),
        0 0 25px rgba(225, 6, 19, 0.25);
}

.brand:hover .brand-logo img {
    transform: scale(1.05);
}


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

@media (max-width: 900px) {

    .brand-logo {
        width: 53px;
        height: 53px;
        flex-basis: 53px;
    }

}


@media (max-width: 480px) {

    .brand-logo {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

}


@media (max-width: 360px) {

    .brand-logo {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
    }

}