/* =====================================================
   ELON MUSK TRIBUTE PAGE
   PREMIUM MODERN UI STYLESHEET
   Developed for Aaditya Singh
===================================================== */


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

:root{

    --primary:#2563eb;
    --secondary:#1e40af;
    --accent:#60a5fa;

    --dark:#0f172a;
    --dark-soft:#1e293b;

    --light:#f8fafc;
    --white:#ffffff;

    --text:#334155;
    --muted:#64748b;

    --border:rgba(15,23,42,.08);

    --shadow:
    0 20px 40px rgba(15,23,42,.12);

    --radius:20px;

    --transition:.35s ease;

}



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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(
        135deg,
        #f8fafc,
        #eef2ff
    );

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

}


/* =====================================================
   DEFAULT ELEMENTS
===================================================== */


a{

    text-decoration:none;

    color:inherit;

}


img{

    max-width:100%;

    display:block;

}


ul{

    list-style:none;

}


::selection{

    background:var(--primary);

    color:white;

}



/* =====================================================
   PAGE LOADING ANIMATION
===================================================== */


body{

    animation:pageReveal .8s ease;

}


@keyframes pageReveal{


    from{

        opacity:0;

    }


    to{

        opacity:1;

    }

}



/* =====================================================
   CUSTOM SCROLLBAR
===================================================== */


::-webkit-scrollbar{

    width:12px;

}


::-webkit-scrollbar-track{

    background:#e2e8f0;

}


::-webkit-scrollbar-thumb{

    background:

    linear-gradient(
        var(--primary),
        var(--accent)
    );

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}



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


.hero{


    min-height:100vh;


    background:

    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),

    url("../images/elon-musk.jpg");


    background-size:cover;


    background-position:center;


    position:relative;


    display:flex;


    flex-direction:column;


    color:white;


}



/* =====================================================
   NAVBAR
===================================================== */


.navbar{


    width:100%;


    padding:25px 8%;


    display:flex;


    justify-content:space-between;


    align-items:center;


    position:fixed;


    top:0;


    left:0;


    z-index:1000;


    background:

    rgba(15,23,42,.45);


    backdrop-filter:blur(15px);


    border-bottom:

    1px solid rgba(255,255,255,.1);


}




.logo{


    font-size:1.5rem;


    font-weight:700;


    color:white;


    letter-spacing:.5px;


}



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


.nav-links{


    display:flex;


    gap:35px;


}


.nav-links li{


    position:relative;


}



.nav-links a{


    color:white;


    font-size:.95rem;


    font-weight:500;


    transition:var(--transition);


}



.nav-links a:hover{


    color:var(--accent);


}



/* underline animation */


.nav-links li::after{


    content:"";


    position:absolute;


    bottom:-8px;


    left:0;


    height:3px;


    width:0;


    background:var(--accent);


    border-radius:10px;


    transition:.3s ease;


}



.nav-links li:hover::after{


    width:100%;


}



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


.hero-content{


    margin:auto;


    text-align:center;


    padding:120px 20px 40px;


    max-width:900px;


}



.hero-content h1{


    font-size:5rem;


    font-weight:700;


    letter-spacing:3px;


    margin-bottom:20px;


    background:

    linear-gradient(
        90deg,
        white,
        #60a5fa,
        white
    );


    background-size:200%;


    -webkit-background-clip:text;


    color:transparent;


    animation:textGlow 5s linear infinite;


}



@keyframes textGlow{


    from{

        background-position:0%;

    }


    to{

        background-position:200%;

    }

}


.hero-content p{


    font-size:1.4rem;


    color:#e2e8f0;


    margin-bottom:40px;


}



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


.hero-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



.btn{


    display:inline-block;


    padding:14px 35px;


    border-radius:50px;


    background:var(--primary);


    color:white;


    font-weight:600;


    transition:var(--transition);


    box-shadow:

    0 15px 35px rgba(37,99,235,.35);


}



.btn:hover{


    transform:translateY(-5px);


    background:var(--secondary);


    box-shadow:

    0 20px 45px rgba(37,99,235,.5);


}



.btn-outline{


    background:transparent;


    border:2px solid white;


    box-shadow:none;


}



.btn-outline:hover{


    background:white;


    color:var(--dark);


}

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


.container{


    width:90%;


    max-width:1200px;


    margin:auto;


    padding:90px 0;


}



/* =====================================================
   IMAGE SECTION
===================================================== */


.image-section{


    display:flex;


    justify-content:center;


    align-items:center;


    margin-bottom:60px;


    position:relative;


}



.image-section::before{


    content:"";


    position:absolute;


    width:320px;


    height:320px;


    background:

    radial-gradient(
        circle,
        rgba(37,99,235,.25),
        transparent 70%
    );


    filter:blur(20px);


    z-index:-1;


}



.image-section img{


    width:360px;


    height:360px;


    object-fit:cover;


    border-radius:50%;


    border:8px solid white;


    box-shadow:

    0 25px 60px rgba(15,23,42,.2);


    transition:var(--transition);


    animation:

    floatingImage 5s ease-in-out infinite;


}



@keyframes floatingImage{


    0%,100%{


        transform:translateY(0);


    }


    50%{


        transform:translateY(-15px);


    }

}



.image-section img:hover{


    transform:scale(1.05);


    box-shadow:

    0 30px 80px rgba(37,99,235,.35);


}



/* =====================================================
   COMMON CARD DESIGN
===================================================== */


.card{


    background:

    rgba(255,255,255,.85);


    backdrop-filter:blur(15px);


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


    padding:45px;


    border-radius:var(--radius);


    margin-bottom:45px;


    border:

    1px solid var(--border);


    box-shadow:var(--shadow);


    transition:var(--transition);


    position:relative;


    overflow:hidden;


}



.card::before{


    content:"";


    position:absolute;


    width:150px;


    height:150px;


    background:

    radial-gradient(
        circle,
        rgba(37,99,235,.12),
        transparent
    );


    top:-50px;


    right:-50px;


}



.card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 30px 60px rgba(15,23,42,.18);


}



.card h2{


    font-size:2.2rem;


    color:var(--dark);


    margin-bottom:25px;


    position:relative;


    display:inline-block;


}



.card h2::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-10px;


    height:4px;


    width:70px;


    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );


    border-radius:20px;


}



.card p{


    color:var(--text);


    font-size:1.05rem;


    margin-bottom:18px;


    text-align:justify;


}



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


.stats{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(220px,1fr)
    );


    gap:25px;


    margin-bottom:45px;


}



.stat-card{


    background:white;


    padding:35px 25px;


    border-radius:20px;


    text-align:center;


    box-shadow:

    0 15px 35px rgba(15,23,42,.10);


    border:

    1px solid var(--border);


    transition:var(--transition);


}



.stat-card:hover{


    transform:

    translateY(-10px)
    scale(1.03);


    background:

    linear-gradient(
        135deg,
        var(--primary),
        #3b82f6
    );


    color:white;


}



.stat-card h3{


    font-size:2.2rem;


    margin-bottom:10px;


    color:var(--primary);


}



.stat-card:hover h3{


    color:white;


}



.stat-card p{


    color:var(--muted);


    font-weight:500;


}



.stat-card:hover p{


    color:white;


}



/* =====================================================
   QUICK FACTS GRID
===================================================== */


.facts{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(250px,1fr)
    );


    gap:25px;


    margin-top:35px;


}



.fact-box{


    padding:30px;


    border-radius:20px;


    background:

    linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );


    border:

    1px solid rgba(37,99,235,.15);


    transition:var(--transition);


}



.fact-box:hover{


    transform:translateY(-8px);


    background:

    linear-gradient(
        135deg,
        var(--primary),
        #60a5fa
    );


    color:white;


}



.fact-box h3{


    font-size:1.2rem;


    margin-bottom:12px;


    color:var(--secondary);


}



.fact-box:hover h3{


    color:white;


}



.fact-box p{


    margin:0;


    color:var(--text);


}



.fact-box:hover p{


    color:white;


}

/* =====================================================
   ACHIEVEMENTS SECTION
===================================================== */


.achievement-grid{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(280px,1fr)
    );


    gap:30px;


    margin-top:35px;


}



.achievement-card{


    background:

    linear-gradient(
        145deg,
        #ffffff,
        #f8fafc
    );


    padding:30px;


    border-radius:22px;


    border:

    1px solid var(--border);


    box-shadow:

    0 15px 35px rgba(15,23,42,.08);


    transition:var(--transition);


    position:relative;


    overflow:hidden;


}



.achievement-card::before{


    content:"";


    position:absolute;


    height:5px;


    width:100%;


    left:0;


    top:0;


    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );


}



.achievement-card:hover{


    transform:

    translateY(-12px);


    background:

    linear-gradient(
        135deg,
        var(--primary),
        #3b82f6
    );


    color:white;


    box-shadow:

    0 25px 50px rgba(37,99,235,.35);


}



.achievement-card .icon{


    font-size:2.5rem;


    display:block;


    margin-bottom:15px;


}



.achievement-card h3{


    font-size:1.5rem;


    margin-bottom:15px;


    color:var(--dark);


}



.achievement-card:hover h3{


    color:white;


}



.achievement-card p{


    color:var(--muted);


    text-align:left;


}



.achievement-card:hover p{


    color:white;


}



/* =====================================================
   COMPANIES SECTION
===================================================== */


.company-grid{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(220px,1fr)
    );


    gap:25px;


    margin-top:30px;


}



.company-card{


    padding:30px;


    background:white;


    border-radius:20px;


    text-align:center;


    border:

    1px solid var(--border);


    transition:var(--transition);


}



.company-card:hover{


    transform:translateY(-10px);


    background:

    linear-gradient(
        135deg,
        #1e3a8a,
        #2563eb
    );


    color:white;


}



.company-card h3{


    font-size:1.3rem;


    margin-bottom:12px;


}



.company-card p{


    color:var(--muted);


    text-align:center;


}



.company-card:hover p{


    color:#e0f2fe;


}



/* =====================================================
   MODERN TIMELINE
===================================================== */


.timeline{


    position:relative;


    margin-top:40px;


    padding-left:40px;


}



.timeline::before{


    content:"";


    position:absolute;


    left:15px;


    top:0;


    height:100%;


    width:4px;


    background:

    linear-gradient(
        var(--primary),
        var(--accent)
    );


    border-radius:20px;


}



.timeline-item{


    position:relative;


    margin-bottom:40px;


}



.timeline-item::before{


    content:"";


    position:absolute;


    left:-35px;


    top:5px;


    width:18px;


    height:18px;


    border-radius:50%;


    background:var(--primary);


    border:4px solid white;


    box-shadow:

    0 0 20px rgba(37,99,235,.5);


}



.year{


    display:inline-block;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );


    color:white;


    padding:8px 18px;


    border-radius:30px;


    font-weight:600;


    margin-bottom:12px;


}



.timeline-content{


    background:white;


    padding:25px;


    border-radius:18px;


    box-shadow:

    0 15px 35px rgba(15,23,42,.08);


    border:

    1px solid var(--border);


    transition:var(--transition);


}



.timeline-content:hover{


    transform:translateX(10px);


    box-shadow:

    0 20px 40px rgba(15,23,42,.15);


}



.timeline-content h3{


    color:var(--secondary);


    margin-bottom:10px;


}



.timeline-content p{


    margin:0;


    color:var(--muted);


}



/* =====================================================
   QUOTE SECTION
===================================================== */


.quote-section{


    margin-bottom:50px;


    padding:60px 40px;


    text-align:center;


    background:


    linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );


    border-radius:25px;


    position:relative;


    overflow:hidden;


}



.quote-section::before{


    content:"“";


    position:absolute;


    font-size:12rem;


    color:rgba(37,99,235,.12);


    top:-40px;


    left:30px;


}



.quote-section blockquote{


    font-size:1.8rem;


    font-style:italic;


    color:var(--dark);


    position:relative;


    z-index:1;


}



.quote-section span{


    display:block;


    margin-top:20px;


    color:var(--primary);


    font-weight:600;


}

/* =====================================================
   INTERESTING FACTS SECTION
===================================================== */


.fun-facts{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(280px,1fr)
    );


    gap:20px;


    margin-top:25px;


}



.fun-facts li{


    background:white;


    padding:20px 25px;


    border-radius:18px;


    border:

    1px solid var(--border);


    box-shadow:

    0 10px 25px rgba(15,23,42,.06);


    transition:var(--transition);


    font-size:1rem;


}



.fun-facts li:hover{


    transform:translateX(10px);


    background:

    linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );


    border-left:

    5px solid var(--primary);


}



/* =====================================================
   LEARN MORE SECTION
===================================================== */


.learn-more{


    text-align:center;


}



.learn-more p{


    text-align:center;


    max-width:700px;


    margin:

    0 auto 30px;


}



/* =====================================================
   BACK TO TOP BUTTON
===================================================== */


.back-to-top{


    position:fixed;


    right:30px;


    bottom:30px;


    width:55px;


    height:55px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );


    color:white;


    font-size:1.5rem;


    font-weight:bold;


    box-shadow:

    0 15px 35px rgba(37,99,235,.4);


    transition:var(--transition);


    z-index:999;


}



.back-to-top:hover{


    transform:

    translateY(-8px);


    box-shadow:

    0 25px 45px rgba(37,99,235,.6);


}



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


footer{


    background:


    linear-gradient(
        135deg,
        #020617,
        #0f172a
    );


    color:#cbd5e1;


    padding:70px 20px 40px;


    text-align:center;


    position:relative;


    overflow:hidden;


}



/* footer background shapes */


footer::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    background:

    radial-gradient(
        circle,
        rgba(96,165,250,.25),
        transparent 70%
    );


    top:-150px;


    right:-120px;


}



footer::after{


    content:"";


    position:absolute;


    width:300px;


    height:300px;


    background:

    radial-gradient(
        circle,
        rgba(37,99,235,.18),
        transparent 70%
    );


    bottom:-120px;


    left:-100px;


}



.footer-content{


    position:relative;


    z-index:2;


    max-width:900px;


    margin:auto;


}



.footer-content h2{


    color:white;


    font-size:2rem;


    margin-bottom:20px;


}



.footer-description{


    max-width:700px;


    margin:auto;


    color:#94a3b8;


}



.footer-links{


    margin:35px 0;


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:25px;


}



.footer-links a{


    color:#cbd5e1;


    transition:.3s;


}



.footer-links a:hover{


    color:#60a5fa;


}



.footer-social{


    margin:25px 0;


}



.footer-social a{


    display:inline-block;


    padding:10px 25px;


    border-radius:30px;


    background:

    rgba(255,255,255,.08);


    transition:.3s;


}



.footer-social a:hover{


    background:var(--primary);


    color:white;


}



footer hr{


    margin:35px auto;


    width:80%;


    border:none;


    height:1px;


    background:

    rgba(255,255,255,.15);


}



.credit{


    color:white;


}



.credit strong{


    color:#60a5fa;


}



.copyright{


    color:#64748b;


    font-size:.9rem;


}



.footer-version{


    margin-top:15px;


    color:#60a5fa;


    font-size:.85rem;


}



/* =====================================================
   BUTTON FOCUS ACCESSIBILITY
===================================================== */


a:focus{


    outline:

    3px solid var(--accent);


    outline-offset:5px;


}



/* =====================================================
   HOVER CURSOR EFFECTS
===================================================== */


.stat-card,
.fact-box,
.company-card,
.achievement-card,
.timeline-content{


    cursor:pointer;


}

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


/* =====================================================
   LARGE TABLETS / SMALL LAPTOPS
===================================================== */


@media(max-width:1100px){


    .hero-content h1{


        font-size:4rem;


    }


    .navbar{


        padding:22px 5%;


    }


    .container{


        width:92%;


    }


}



/* =====================================================
   TABLETS
===================================================== */


@media(max-width:900px){


    .nav-links{


        gap:20px;


    }



    .hero-content h1{


        font-size:3.5rem;


    }



    .hero-content p{


        font-size:1.2rem;


    }



    .card{


        padding:35px;


    }



    .image-section img{


        width:320px;


        height:320px;


    }



}



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


@media(max-width:768px){



    .navbar{


        flex-direction:column;


        gap:18px;


        padding:20px;


    }



    .logo{


        font-size:1.3rem;


    }



    .nav-links{


        width:100%;


        justify-content:center;


        flex-wrap:wrap;


        gap:15px;


    }



    .nav-links a{


        font-size:.85rem;


    }



    .hero{


        min-height:90vh;


    }



    .hero-content{


        padding-top:150px;


    }



    .hero-content h1{


        font-size:2.8rem;


        letter-spacing:1px;


    }



    .hero-content p{


        font-size:1rem;


    }



    .hero-buttons{


        flex-direction:column;


        align-items:center;


    }



    .btn{


        width:220px;


    }



    .container{


        width:94%;


        padding:60px 0;


    }



    .image-section img{


        width:260px;


        height:260px;


    }



    .card{


        padding:25px;


        border-radius:18px;


    }



    .card h2{


        font-size:1.7rem;


    }



    .card p{


        font-size:.95rem;


        text-align:left;


    }



    .stats{


        grid-template-columns:1fr;


    }



    .facts{


        grid-template-columns:1fr;


    }



    .achievement-grid{


        grid-template-columns:1fr;


    }



    .company-grid{


        grid-template-columns:1fr;


    }



    .timeline{


        padding-left:30px;


    }



    .quote-section{


        padding:40px 20px;


    }



    .quote-section blockquote{


        font-size:1.3rem;


    }



    .back-to-top{


        width:45px;


        height:45px;


        right:20px;


        bottom:20px;


        font-size:1.2rem;


    }



}



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


@media(max-width:480px){



    .hero-content h1{


        font-size:2.2rem;


    }



    .hero-content p{


        font-size:.9rem;


    }



    .logo{


        font-size:1.1rem;


    }



    .nav-links{


        gap:10px;


    }



    .nav-links a{


        font-size:.75rem;


    }



    .image-section img{


        width:220px;


        height:220px;


    }



    .card{


        padding:20px;


    }



    .card h2{


        font-size:1.5rem;


    }



    .stat-card h3{


        font-size:1.8rem;


    }



    .achievement-card{


        padding:22px;


    }



    .timeline-item{


        margin-bottom:30px;


    }



    .footer-content h2{


        font-size:1.5rem;


    }



}



/* =====================================================
   ACCESSIBILITY
===================================================== */


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


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


        animation-duration:0.01ms !important;


        animation-iteration-count:1 !important;


        scroll-behavior:auto !important;


        transition-duration:0.01ms !important;


    }


}



/* =====================================================
   PREMIUM MICRO INTERACTIONS
===================================================== */



.card,
.stat-card,
.fact-box,
.company-card,
.achievement-card{


    will-change:transform;


}



/* Smooth text rendering */


body{


    -webkit-font-smoothing:antialiased;


    -moz-osx-font-smoothing:grayscale;


}



/* Image performance */


img{


    image-rendering:auto;


}



/* =====================================================
   FINAL POLISH
===================================================== */


strong{


    font-weight:600;


}



hr{


    opacity:.4;


}



button{


    font-family:inherit;


}

/* =====================================================
   PREMIUM CARD SHINE EFFECT
===================================================== */


.card::after,
.achievement-card::after,
.company-card::after,
.stat-card::after{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:50%;


    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );


    transition:.7s;


}



.card:hover::after,
.achievement-card:hover::after,
.company-card:hover::after,
.stat-card:hover::after{


    left:120%;


}




/* =====================================================
   HERO OVERLAY EFFECT
===================================================== */


.hero::after{


    content:"";


    position:absolute;


    bottom:0;


    left:0;


    width:100%;


    height:150px;


    background:

    linear-gradient(
        transparent,
        #f8fafc
    );


}



.hero-content{


    position:relative;


    z-index:2;


}



/* =====================================================
   FLOATING EFFECT FOR CARDS
===================================================== */


.stat-card:nth-child(odd),
.company-card:nth-child(odd){


    animation:

    floatCard 6s ease-in-out infinite;


}



.stat-card:nth-child(even),
.company-card:nth-child(even){


    animation:

    floatCard 7s ease-in-out infinite;


}



@keyframes floatCard{


    0%,100%{


        transform:translateY(0);


    }


    50%{


        transform:translateY(-8px);


    }


}



/* =====================================================
   TIMELINE GLOW
===================================================== */


.timeline-item:hover::before{


    box-shadow:

    0 0 0 8px rgba(37,99,235,.15),
    0 0 25px rgba(37,99,235,.8);


}




/* =====================================================
   PREMIUM HEADING EFFECT
===================================================== */


.card h2{


    background:

    linear-gradient(
        90deg,
        var(--dark),
        var(--primary)
    );


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}



/* =====================================================
   NAVBAR SCROLL FEEL
===================================================== */


.navbar{


    transition:.4s ease;


}



.navbar:hover{


    background:

    rgba(15,23,42,.75);


}




/* =====================================================
   HERO BUTTON ANIMATION
===================================================== */


.btn{


    position:relative;


    overflow:hidden;


}



.btn::before{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );


    transition:.5s;


}



.btn:hover::before{


    left:100%;


}





/* =====================================================
   IMAGE PREMIUM BORDER ANIMATION
===================================================== */


.image-section img{


    position:relative;


}



.image-section img:hover{


    border-color:

    var(--accent);


}



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


@media(max-width:768px){



    .card:hover,
    .stat-card:hover,
    .company-card:hover,
    .achievement-card:hover{


        transform:none;


    }



    .stat-card:nth-child(odd),
    .stat-card:nth-child(even),
    .company-card:nth-child(odd),
    .company-card:nth-child(even){


        animation:none;


    }



}



/* =====================================================
   PRINT FRIENDLY
===================================================== */


@media print{


    .navbar,
    .back-to-top,
    .hero-buttons{


        display:none;


    }



    body{


        background:white;


        color:black;


    }



    .card{


        box-shadow:none;


        border:1px solid #ddd;


    }


}