@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic,700");
@import url("fontawesome-all.min.css");

/* Global styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}


/* Hero title */


/* Hero section */
#hero {
    background-color: #000;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 300px 0 0 380px;   /* keep text in original position */
    box-sizing: border-box;
    position: relative;          /* NEW: needed for absolute logo positioning */
    text-align: left;
    margin-bottom: 220px; /* adds space below hero */

}



/* Hero title */
#hero h1 {
    color: #fff;
    font-weight: 900;
    font-size: 3rem;
    line-height: 1.3;
    margin: 0;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

/* Logo container */
.hero-logo-wrapper {
    position: absolute;
    top: 300px;
    left: calc(380px + 550px);
    width: 300px;                /* Match logo size */
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The logo itself */
.hero-logo {
    width: 100%;
    height: auto;
    border-radius: 50%;          /* Ensures it’s circular if it’s a disc logo */
    position: relative;
    z-index: 2;                  /* Keeps logo above circles */
}

/* Base circle styles (3 total) */
.hero-logo-wrapper::before,
.hero-logo-wrapper::after,
.hero-logo-wrapper .circle-3 {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

/* 1st circle – boldest and smallest */
.hero-logo-wrapper::before {
  width: 110%;
  height: 110%;
    border: 4px solid white;
}

/* 2nd circle – medium */
.hero-logo-wrapper::after {
  width: 130%;
  height: 130%;
    border: 3px solid white;
}

/* 3rd circle – largest and thinnest */
.hero-logo-wrapper .circle-3 {
  width: 150%;
  height: 150%;
    border: 2px solid white;
}



/* download button */


.hero-download-btn {
    width: 150px;        /* adjust size */
    margin-top: 25px;    /* space from headline */
    cursor: pointer;     /* pointer on hover */
    display: block;      /* ensures it sits on its own line */
}



.hero-download-btn:hover {
    transform: scale(1.05);
    transition: 0.2s ease-in-out;
}