/* =========================================
   STEEMIT HUB
   COMPLETE STYLE.CSS
========================================= */


/* =========================================
   1. RESET & GLOBAL STYLES
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background: #f5f7fb;
    color: #172033;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
}


/* =========================================
   2. HEADER
========================================= */

.header {
    width: 100%;
    height: 75px;

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

    padding: 0 7%;

    background: #ffffff;

    border-bottom: 1px solid #e8ebf0;

    position: sticky;
    top: 0;

    z-index: 1000;
}


/* Logo */

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

.logo {

    display: flex;

    align-items: center;

    gap: 0px;

    text-decoration: none;
}

.logo-image {

    width: 48px;

    height: 48px;

    object-fit: contain;

    transition: transform .3s ease;
}

.logo:hover .logo-image {

    transform: rotate(10deg) scale(1.08);
}

.logo h2 {

    margin: 0;

    font-size: 1.5rem;

    font-weight: 800;

    color: #172033;
}

.logo h2 span {

    color: #ff4b1f;
}

body.dark-mode .logo h2 {

    color: #ffffff;
}

body.dark-mode .logo h2 span {

    color: #ff4b1f;
}

/* Navigation */

nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

nav a {
    color: #555f70;
    font-weight: 600;

    transition: 0.3s ease;
}

nav a:hover {
    color: #ff4b1f;
}


/* Visit Steemit Button */

.visit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 20px;

    background: #ff4b1f;
    color: #ffffff;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s ease;
}

.visit-button:hover {
    background: #e63d15;

    transform: translateY(-2px);
}

/* =========================================
   NAVIGATION ACTIONS
========================================= */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================
   DARK MODE BUTTON
========================================= */

.theme-toggle {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 16px;

    border: 1px solid #dce1e8;

    border-radius: 8px;

    background: #ffffff;

    color: #172033;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;
}


.theme-toggle:hover {
    border-color: #ff4b1f;

    color: #ff4b1f;

    transform: translateY(-2px);
}


#theme-icon {
    font-size: 17px;
}


/* =========================================
   DARK MODE
========================================= */

body.dark-mode {
    background: #0f172a;

    color: #f1f5f9;
}


/* Header */

body.dark-mode .header {
    background: #111827;

    border-bottom-color: #263244;
}


/* Logo */

body.dark-mode .logo {
    color: #f1f5f9;
}


/* Navigation */

body.dark-mode nav a {
    color: #cbd5e1;
}


body.dark-mode nav a:hover {
    color: #ff4b1f;
}


/* Dark Mode Button */

body.dark-mode .theme-toggle {
    background: #1e293b;

    border-color: #334155;

    color: #f1f5f9;
}


body.dark-mode .theme-toggle:hover {
    border-color: #ff4b1f;

    color: #ff4b1f;
}


/* =========================================
   DARK MODE HERO
========================================= */

body.dark-mode .hero {
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(255, 75, 31, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0f172a,
            #111827
        );
}


body.dark-mode .hero h1 {
    color: #f8fafc;
}


body.dark-mode .hero p {
    color: #94a3b8;
}


/* Hero Secondary Button */

body.dark-mode .hero-secondary-button {
    background: #1e293b;

    border-color: #334155;

    color: #f1f5f9;
}


/* =========================================
   DARK MODE HUB SECTION
========================================= */

body.dark-mode .hub-section {
    background: #0f172a;
}


body.dark-mode .section-title h2 {
    color: #f8fafc;
}


body.dark-mode .section-title p {
    color: #94a3b8;
}


/* =========================================
   DARK MODE CARDS
========================================= */

body.dark-mode .hub-card {
    background: #111827;

    border-color: #263244;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.25);
}


body.dark-mode .hub-card h3 {
    color: #f8fafc;
}


body.dark-mode .hub-card p {
    color: #94a3b8;
}


/* =========================================
   DARK MODE DROPDOWN
========================================= */

body.dark-mode .dropdown {
    border-top-color: #263244;
}


body.dark-mode .dropdown a {
    background: #1e293b;
}


body.dark-mode .dropdown a:hover {
    background: #2a1d1a;
}


body.dark-mode .dropdown strong {
    color: #f1f5f9;
}


body.dark-mode .dropdown small {
    color: #94a3b8;
}


/* =========================================
   DARK MODE HUB VISUAL
========================================= */

body.dark-mode .hub-logo {
    background: #111827;

    border-color:
        rgba(255, 75, 31, 0.25);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.4);
}


body.dark-mode .hub-logo small {
    color: #f1f5f9;
}


/* Floating Cards */

body.dark-mode .floating-card {
    background:
        rgba(30, 41, 59, 0.95);

    border-color: #334155;

    color: #f1f5f9;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.3);
}


/* =========================================
   DARK MODE ABOUT
========================================= */

body.dark-mode .about {
    background: #020617;
}


body.dark-mode .about p {
    color: #94a3b8;
}


/* =========================================
   DARK MODE FOOTER
========================================= */

body.dark-mode footer {
    background: #020617;
}

/* =========================================
   3. HERO SECTION
========================================= */

.hero {
    min-height: 650px;

    padding: 80px 6%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(255, 75, 31, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f5f7fb
        );
}


/* Hero Container */

.hero-container {
    width: 100%;
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}


/* =========================================
   4. HERO LEFT CONTENT
========================================= */

.hero-content {
    max-width: 650px;

    text-align: left;
}


/* Badge */

.badge {
    display: inline-block;

    padding: 9px 18px;

    margin-bottom: 25px;

    border-radius: 30px;

    background: rgba(255, 75, 31, 0.10);

    color: #ff4b1f;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1.5px;
}


/* Main Heading */

.hero h1 {
    font-size: clamp(40px, 2vw, 65px);

    line-height: 1.0;

    margin-bottom: 15px;

    color: #172033;
}

.hero h1 span {
    display: block;

    color: #ff4b1f;
}


/* Hero Description */

.hero p {
    max-width: 580px;

    margin-bottom: 35px;

    color: #68758a;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================
   5. HERO BUTTONS
========================================= */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 15px;
}


/* Primary Button */

.hero-primary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding: 15px 22px;

    background: #172033;

    color: #ffffff;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.3s ease;
}

.hero-primary-button:hover {
    background: #ff4b1f;

    transform: translateY(-3px);
}

.hero-primary-button span {
    font-size: 20px;
}


/* Secondary Button */

.hero-secondary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 22px;

    border: 1px solid #dce1e8;

    background: #ffffff;

    color: #172033;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.3s ease;
}

.hero-secondary-button:hover {
    border-color: #ff4b1f;

    color: #ff4b1f;

    transform: translateY(-3px);
}


/* =========================================
   6. HERO RIGHT VISUAL
========================================= */

/* =========================================
   NEW HERO RIGHT VISUAL
========================================= */


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

.hero-visual {
position: relative;
min-height: 430px;
display: grid;
place-items: center;
}

.main-circle {
width: 310px;
height: 310px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(
135deg,
rgba(255, 75, 31, 0.12),
rgba(255, 144, 104, 0.04)
);
border: 1px solid rgba(255, 75, 31, 0.2);
animation: float 5s ease-in-out infinite;
}

.circle-inner {
width: 210px;
height: 210px;
display: grid;
place-items: center;
border-radius: 50%;
background: white;
color: #ff4b1f;
font-size: 75px;
box-shadow: 0 25px 60px rgba(25, 35, 55, 0.12);
}

.floating-card {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
padding: 15px 20px;
background: white;
border-radius: 14px;
box-shadow: 0 15px 40px rgba(25, 35, 55, 0.1);
font-size: 13px;
font-weight: 700;
}

.floating-card i {
color: #ff4b1f;
}

.card-one {
top: 50px;
left: 10px;
animation: float 4s ease-in-out infinite;
}

.card-two {
right: 0;
bottom: 55px;
animation: float 4s ease-in-out infinite reverse;
}



/* =========================================
   CENTER ICON
========================================= */

.center-icon {

    width: 85px;

    height: 85px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 55px;

}


/* =========================================
   FLOATING LABELS
========================================= */

.visual-label {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 18px;

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

    border:
        1px solid
        #e5e9ef;

    border-radius: 14px;

    box-shadow:

        0 15px 35px
        rgba(23, 32, 51, 0.10);

    color:
        #172033;

    font-size: 14px;

    font-weight: bold;

    z-index: 20;

    white-space: nowrap;

}


/* =========================================
   LABEL ICON
========================================= */

.label-icon {

    font-size: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   PLATFORMS POSITION
========================================= */

.label-platforms {

    top: 20px;

    left: -60px;

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

        animation-delay:
        1.5s;

}


/* =========================================
   GAMES POSITION
========================================= */

.label-games {

    bottom: 20px;

    right: -60px;

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

    animation-delay:
        1.5s;

}


/* =========================================
   FLOATING LABEL ANIMATION
========================================= */

@keyframes floatingLabel {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


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

.background-rings {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    right: -45%;

    pointer-events: none;

}


/* Individual Rings */

.background-rings span {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 75, 31, 0.15);

}


/* Ring 1 */

.background-rings span:nth-child(1) {

    width: 300px;

    height: 300px;

    right: -50px;

    top: 80px;

}


/* Ring 2 */

.background-rings span:nth-child(2) {

    width: 400px;

    height: 400px;

    right: -100px;

    top: 30px;

}


/* Ring 3 */

.background-rings span:nth-child(3) {

    width: 500px;

    height: 500px;

    right: -150px;

    top: -20px;

}

.center-icon img {
    width: 90px;
    height: 90px;

    object-fit: contain;
}

/* =========================================
   13. HUB SECTION
========================================= */

.hub-section {
    padding: 100px 7%;

    background: #f5f7fb;
}


/* Section Title */

.section-title {
    text-align: center;

    max-width: 650px;

    margin: 0 auto 60px;
   
    margin-bottom: 25px;
}


.section-title span {
    color: #ff4b1f;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;
    
}


.section-title h2 {
    font-size: 42px;

    margin: 15px 0;

    color: #172033;
}


.section-title p {
    color: #747e8f;

    line-height: 1.6;
}


/* =========================================
   14. CARDS CONTAINER
========================================= */

.cards-container {
    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 30px;
}


/* =========================================
   15. HUB CARDS
========================================= */

.hub-card {
    background: #ffffff;

    padding: 40px;

    border-radius: 25px;

    border: 1px solid #e5e9ef;

    box-shadow:
        0 15px 40px
        rgba(23, 32, 51, 0.05);

    transition: 0.3s ease;

    display: flex;

    flex-direction: column;
}


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

    box-shadow:
        0 25px 60px
        rgba(23, 32, 51, 0.10);
}


/* =========================================
   16. CARD ICON
========================================= */

.card-icon {
    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        rgba(255, 75, 31, 0.10);

    font-size: 32px;

    margin-bottom: 25px;
}


/* =========================================
   17. CARD HEADING
========================================= */

.hub-card h3 {
    font-size: 28px;

    margin-bottom: 15px;

    color: #172033;
}


/* =========================================
   18. CARD DESCRIPTION
========================================= */

.hub-card p {
    color: #747e8f;

    line-height: 1.7;

    margin-bottom: 25px;

    min-height: 81px;
}


/* =========================================
   19. EXPLORE BUTTON
========================================= */

.explore-button {
    width: 100%;

    padding: 15px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: auto;

    border: none;

    border-radius: 10px;

    background: #172033;

    color: #ffffff;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s ease;
}


.explore-button:hover {
    background: #ff4b1f;
}


.explore-button span {
    font-size: 20px;

    transition: 0.3s ease;
}


/* =========================================
   20. DROPDOWN
========================================= */

.dropdown {
    display: none;

    margin-top: 20px;

    padding-top: 10px;

    border-top: 1px solid #e8ebf0;
}


.dropdown.show {
    display: block;

    animation:
        dropdownAnimation 0.3s ease;
}


@keyframes dropdownAnimation {

    from {
        opacity: 0;

        transform: translateY(-10px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================
   21. DROPDOWN LINKS
========================================= */

.dropdown a {
    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 15px;

    margin-top: 8px;

    border-radius: 10px;

    background: #f6f8fa;

    text-decoration: none;

    transition: 0.3s ease;
}


.dropdown a:hover {
    background: #fff0eb;

    transform: translateX(5px);
}


.dropdown strong {
    color: #172033;

    font-size: 14px;
}


.dropdown small {
    color: #7d8797;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================
   22. ABOUT SECTION
========================================= */

/* .about {
    padding: 100px 20px;

    text-align: center;

    background: #172033;

    color: #ffffff;
}


.about h2 {
    font-size: 40px;

    margin-bottom: 20px;
}


.about p {
    max-width: 650px;

    margin: auto;

    color: #aeb6c5;

    line-height: 1.8;
} */


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

.footer{

    background:#111827;

    color:#ffffff;

    padding:70px 8%;
}

.footer-container{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:60px;
}


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

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;
}

.footer-logo img{

    width:55px;

    height:55px;

    object-fit:contain;
}

.footer-logo h2{

    margin:0;

    font-size:30px;
}

.footer-logo span{

    color:#ff4b1f;
}

.footer-column p{

    color:#b8c1d1;

    line-height:1.8;

    font-size:15px;
}


/*========================
CENTER
=========================*/

.footer-center{

    text-align:center;
}

.footer-center h3{

    margin-bottom:25px;

    font-size:22px;
}

.social-links{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.social-links a{

    color:#d9e0ea;

    text-decoration:none;

    font-size:17px;

    transition:.3s;
}

.social-links a:hover{

    color:#ff4b1f;

    transform:translateX(5px);
}

.social-links i{

    margin-right:12px;

    width:25px;
}


/*========================
RIGHT
=========================*/

.footer-right{

    text-align:right;
}

.footer-right h3{

    margin-bottom:20px;
}

.footer-right strong{

    color:#ff4b1f;
}

.heart{

    color:red;

    animation:heartBeat 1s infinite;
}

@keyframes heartBeat{

0%{

transform:scale(1);
}

50%{

transform:scale(1.3);
}

100%{

transform:scale(1);
}

}


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

@media(max-width:900px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

justify-content:center;
}

.footer-right{

text-align:center;
}

}

/* =========================================
   24. TABLET RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    /* Hero */

    .hero-container {
        gap: 40px;
    }


    .hero h1 {
        font-size: 55px;
    }


    /* Cards */

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

}


/* =========================================
   25. TABLET HERO
========================================= */

@media (max-width: 900px) {

    .hero {
        padding: 70px 5%;
    }


    .hero-container {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .hero-content {
        max-width: 700px;

        margin: auto;

        text-align: center;
    }


    .hero p {
        margin-left: auto;

        margin-right: auto;
    }


    .hero-buttons {
        justify-content: center;
    }


    .hero-visual {
        min-height: 450px;
    }

}


/* =========================================
   26. MOBILE NAVIGATION
========================================= */

@media (max-width: 768px) {

    .header {
        padding: 0 5%;
    }


    nav {
        display: none;
    }


    .visit-button {
        display: none;
    }


    /* Hero */

    .hero {
        padding:
            60px 20px;
    }


    .hero h1 {
        font-size: 48px;
    }


    /* Cards */

    .cards-container {
        grid-template-columns: 1fr;
    }


    .section-title h2 {
        font-size: 32px;
    }


    .hub-card {
        padding: 30px;
    }

    .nav-actions {
    gap: 8px;
}

.theme-toggle {
    padding: 10px 12px;
}

#theme-text {
    display: none;
}

}


/* =========================================
   27. SMALL MOBILE
========================================= */

@media (max-width: 600px) {

    /* Hero */

    .hero h1 {
        font-size: 42px;
    }


    .hero p {
        font-size: 16px;
    }


    /* Hero Buttons */

    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }


    .hero-primary-button,
    .hero-secondary-button {
        width: 100%;
    }


    /* Hero Visual */

    .hero-visual {
        min-height: 400px;

        transform: scale(0.75);

        margin:
            -50px 0;
    }


    /* Hub Orbit */

    .hub-orbit {
        width: 340px;

        height: 340px;
    }


    /* Floating Cards */

    .card-one {
        left: -5px;
    }


    .card-two {
        right: -5px;
    }


    .card-three {
        left: -10px;
    }


    .card-four {
        right: 0;
    }

}


/* =========================================
   28. EXTRA SMALL DEVICES
========================================= */

@media (max-width: 400px) {

    .hero h1 {
        font-size: 36px;
    }


    .hub-orbit {
        width: 300px;

        height: 300px;
    }


    .hub-logo {
        width: 140px;

        height: 140px;
    }


    .hub-logo span {
        font-size: 20px;
    }


    .floating-card {
        min-width: 120px;

        padding:
            10px 12px;

        font-size: 12px;
    }


    .floating-icon {
        font-size: 20px;
    }

}