/* =========================================
   BODY
========================================= */

body{

    margin:0;

    min-height:100vh;

    font-family:
        "Segoe UI",
        sans-serif;

    color:white;

    background:
        radial-gradient(
            circle at 20% 20%,
            #0a0f1f,
            #000
        );

}

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

.center-header{

    text-align:center;

    padding:50px 20px;

}

.center-header h1{

    margin:0;

    font-size:40px;

    color:#00c3ff;

    text-shadow:
        0 0 15px #00c3ff;

}

.center-header p{

    margin-top:15px;

    font-size:18px;

    opacity:.8;

}

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

.hotspot-container{

    max-width:1200px;

    margin:auto;

    padding:20px;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap:25px;

}

.hotspot-card{

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

    padding:30px;

    border-radius:18px;

    text-align:center;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 0 15px rgba(
            0,
            195,
            255,
            .2
        );

    transition:
        .25s ease;

}

.hotspot-card.active{

    cursor:pointer;

}

.hotspot-card.active:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 0 25px rgba(
            0,
            195,
            255,
            .45
        );

}

.hotspot-card.disabled{

    opacity:.55;

    cursor:not-allowed;

}

.icon{

    font-size:60px;

    margin-bottom:15px;

}

.hotspot-card h2{

    color:#00c3ff;

    margin-bottom:15px;

}

.hotspot-card p{

    line-height:1.6;

}

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

@media (max-width:768px){

    .center-header h1{

        font-size:30px;

    }

    .hotspot-container{

        padding:15px;

    }

}