:root {
    --glow-opacity: .65;
    --glow-color: rgba(0, 15, 48, 1);
}

* {
    font-family: "Roboto", sans-serif;
}

html, body {
    margin: 0;
}

body {
    background-color: #08205C;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    body {
        background-image: url("/assets/img/bg.png");
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

nav.navbar {
    background-color: #041533;
}

.header .logo {
    display: flex;
    align-items: center;
    background-color: #041533;
    padding: .5rem;
}

.header .logo img {
    width: 250px;
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .header .logo img {
        width: 150px;
    }
}

.header .contact {
    padding: .35rem 2.5rem;
    background-color: #041533;
    color: white;
    font-size: 1.25rem;
    font-weight: lighter;
    text-align: center;
    justify-content: center;
}

@media (min-width: 320px) {
    .header .contact {
        font-size: 1.55rem;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .header .contact {
        font-size: 1rem;
    }
}

.custom-container {   
    width: 100%;                                             
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .custom-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;  
    }
}

.custom-container .item {
    position: relative;
    display: block;
}

@media (max-width: 320px) {
    .custom-container .item {
        min-height: 300px;
        transform: scale(0.35);
        transform-origin: left bottom;
    }

    .third-item {
        margin-left: 20vw;
    }
}

@media (min-width: 320px) and (max-width: 425px) {
    .custom-container .item {
        min-height: 330px;
        transform: scale(.4);
        transform-origin: left bottom;
    }

    .third-item {
        margin-left: 20vw;
    }
}

@media (min-width: 425px) and (max-width: 768px) {
    .custom-container .item {
        min-height: 400px;
        transform: scale(.5);
        transform-origin: left bottom;
    }

    .second-item {
        margin-left: 5vw;
    }

    .third-item {
        margin-left: 20vw;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .custom-container .item {
        min-height: 450px;
        transform: scale(.6);
        transform-origin: 35% bottom;
    }

    .second-item {
        margin-left: 5vw;
    }

    .third-item {
        margin-left: 20vw;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .custom-container .item {
        min-height: 310px;
        transform: scale(.4);
        transform-origin: 5vw bottom;
    }

    .third-item {
        margin-left: 3vw;
    }
}

@media (min-width: 1440px) and (max-width: 1600px) {
    .custom-container .item {
        min-height: 450px;
        transform: scale(.6);
        transform-origin: left bottom;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .custom-container .item {
        min-height: 400px;
        transform: scale(.55);
        transform-origin: 10vw bottom;
    }
}

@media (min-width: 1920px) {
    .custom-container .item {
        transform: scale(.65);
        transform-origin: 10vw bottom;
        min-height: 500px;
    }

    .third-item {
        margin-left: 3vw;
    }
}

.first-item img {
    position: absolute;
    transform: scale(.4);
}

.second-item img, .third-item img {
    position: absolute;
}

.first-item .item-title {
    position: absolute;
    color: white;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 2.25rem;
    letter-spacing: 2px;
    bottom: 170px;
    left: 360px;
    text-wrap: nowrap;
}

.second-item .item-title {
    position: absolute;
    color: white;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 2.25rem;
    letter-spacing: 2px;
    bottom: 170px;
    left: 260px;
    text-wrap: nowrap;
}

.third-item .item-title {
    position: absolute;
    color: white;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 2.25rem;
    letter-spacing: 2px;
    bottom: 170px;
    left: 15px;
    text-wrap: nowrap;
}

#svg1 {
    left: 190px;
    bottom: 90px;
}

#svg2 {
    left: 140px;
    bottom: 140px;
}

#svg3 {
    left: 0;
    bottom: 130px;
}

#svg3b {
    left: 105px;
    bottom: 220px;
}

#svg4 {
    left: 80px;
    bottom: 0;
}

#svg5 {
    left: 170px;
    bottom: 350px;
}

#svg6 {
    left: 0;
    bottom: -15px;
}

.first-item:hover #svg1 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg2 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg3 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg4 {
    animation: move-left-bottom-second 2000ms infinite;
}

.first-item:hover #svg5 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg6 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg7 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg9 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg10 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg11 {
    animation: move-right-bottom-second 2000ms infinite;
}

.first-item:hover #svg12 {
    animation: move-left-top-second 2000ms infinite;
}

.first-item:hover #svg13 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg14 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg15 {
    animation: rotate 10s infinite;
}

.first-item:hover #svg16 {
    animation: move-right-top-second 2000ms infinite;
}

@keyframes rotate{
    from{
       transform: scale(.4) rotate(0deg);}to{
       transform: scale(.4) rotate(360deg);
    }
 }

#svg6b {
    left: 170px;
    bottom: 160px;
}

#svg7 {
    left: 460px;
    bottom: 175px;
}

#svg9 {
    left: 410px;
    bottom: 105px;
}

#svg9b {
    left: 505px;
    bottom: 185px;
}

#svg10 {
    left: 485px;
    bottom: 385px;
}

#svg11 {
    left: 670px;
    bottom: 140px;
}

#svg12 {
    left: -70px;
    bottom: 200px;
}

#svg13 {
    left: 225px;
    bottom: 435px;
}

#svg13b {
    left: 245px;
    bottom: 485px;
}

#svg14 {
    left: 345px;
    bottom: 355px;
}

#svg14b {
    left: 400px;
    bottom: 455px;
}

#svg15 {
    left: 620px;
    bottom: 480px;
}

#svg16 {
    left: 600px;
    bottom: 460px;
}

#svg17 {
    bottom: 570px;
    left: 350px;
}

#svg18 {
    bottom: 240px;
    left: 250px;
}

#svg19 {
    bottom: 545px;
    left: 210px;
}

#svg20 {
    bottom: 420px;
    left: 175px;
}

#svg21 {
    bottom: 425px;
    left: 225px;
}

#svg22 {
    bottom: 535px;
    left: 515px;
}

#svg23 {
    bottom: 400px;
    left: 560px;
}

#svg24 {
    bottom: 495px;
    left: 490px;
}

#svg25 {
    bottom: 330px;
    left: 150px;
}

#svg26 {
    bottom: 200px;
    left: 550px;
}

#svg27 {
    bottom: 230px;
    left: 535px;
}

#svg28 {
    bottom: 310px;
    left: 325px;
}

#svg29 {
    bottom: 365px;
    left: 345px;
}

@keyframes rotate-second {
    from {
       transform: rotate(0deg);
    } to {
       transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.2, 1.2);
    }
    100% {
       transform: scale(1, 1);
    }
}

@keyframes move-left-top {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-30px, -30px);
    }
}

@keyframes move-left-top-second {
    0% {
        transform: scale(.4) translate(0px, 0px);
    }
    50% {
        transform: scale(.4) translate(-30px, -30px);
    }
}

@keyframes move-right-top {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(30px, -30px);
    }
}

@keyframes move-right-top-second {
    0% {
        transform: scale(.4) translate(0px, 0px);
    }
    50% {
        transform: scale(.4) translate(30px, -30px);
    }
    100% {
       transform: scale(.4);
    }
}

@keyframes move-right-bottom {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(30px, 30px);
    }
}

@keyframes move-right-bottom-second {
    0% {
        transform: scale(.4) translate(0px, 0px);
    }
    50% {
        transform: scale(.4) translate(30px, 30px);
    }
    100% {
       transform: scale(.4);
    }
}

@keyframes move-left-bottom {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-30px, 30px);
    }
}

@keyframes move-left-bottom-second {
    0% {
        transform: scale(.4) translate(0px, 0px);
    }
    50% {
        transform: scale(.4) translate(-30px, 30px);
    }
    100% {
       transform: scale(.4);
    }
}

.second-item:hover #svg17 {
    animation: pulse 2000ms infinite;
}

.second-item:hover #svg18 {
    animation: pulse 2000ms infinite;
}

.second-item:hover #svg19 {
    animation: rotate-second 10s infinite;
}

.second-item:hover #svg20 {
    animation: rotate-second 10s infinite;
}

.second-item:hover #svg21 {
    animation: pulse 2000ms infinite;
}

.second-item:hover #svg22 {
    animation: pulse 1500ms infinite;
}

.second-item:hover #svg23 {
    animation: pulse 2000ms infinite;
}

.second-item:hover #svg24 {
    animation: move-right-top 2000ms infinite;
}

.second-item:hover #svg25 {
    animation: move-left-top 2000ms infinite;
}

.second-item:hover #svg26 {
    animation: move-right-bottom 2000ms infinite;
}

.second-item:hover #svg27 {
    animation: rotate-second 10s infinite;
}

@keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Dedykowane aplikacje */
#svg30 {
    bottom: 310px;
    left: 15px;
}

#svg31 {
    bottom: 210px;
    left: 370px;
}

#svg32 {
    bottom: 225px;
    left: 260px;
}

#svg33 {
    bottom: 230px;
    left: 405px;
}

#svg34 {
    bottom: 610px;
    left: 225px;
}

#svg35 {
    bottom: 250px;
    left: 125px;
}

#svg36 {
    bottom: 335px;
    left: 325px;
}

#svg37 {
    bottom: 545px;
    left: 80px;
}

#svg38 {
    bottom: 420px;
    left: 130px;
}

#svg39 {
    bottom: 620px;
    left: 210px;
}

#svg40 {
    bottom: 215px;
    left: 295px;
}

#svg41 {
    bottom: 380px;
    left: 30px;
}

#svg42 {
    bottom: 315px;
    left: 450px;
}

#svg43 {
    bottom: 300px;
    left: 155px;
}

#svg44 {
    bottom: 430px;
    left: 290px;
}

#svg45 {
    bottom: 460px;
    left: 345px;
}

.third-item:hover #svg30 {
    animation: move-left-top 2000ms infinite;
}

.third-item:hover #svg31 {
    animation: move-right-bottom 2000ms infinite;
}

.third-item:hover #svg32 {
    animation: rotate-second 10s infinite;
}

.third-item:hover #svg33 {
    animation: rotate-second 10s infinite;
}

.third-item:hover #svg34 {
    animation: rotate-second 10s infinite;
}

.third-item:hover #svg35 {
    animation: move-left-bottom 2000ms infinite;
}

.third-item:hover #svg36 {
    animation: pulse 2000ms infinite;
}

.third-item:hover #svg37 {
    animation: rotate-second 10s infinite;
}

.third-item:hover #svg41 {
    animation: rotate-second 10s infinite;
}

.third-item:hover #svg42 {
    animation: rotate-second 10s infinite;
}

.third-item:hover #svg43 {
    animation: tilt-shaking 100ms infinite;
}

.third-item:hover #svg44 {
    animation: move-right-top 2000ms infinite;
}

.third-item:hover #svg45 {
    animation: tilt-shaking 100ms infinite;
}

/* Odnośniki */
.links {
    background-color: #000F30;
    color: rgba(255, 255, 255, .7);
    font-weight: lighter;
    font-size: 28px;
    padding: .15rem .25rem;
}

@media (max-width: 1024px) {
    .links {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) and (max-width: 1920px) {
    .links {
        font-size: 1.25rem;
    }
}

@media (min-width: 1920px) {
    .links {
        font-size: 28px;
    }
}

.links .links-item {
    flex: 1;
    text-align: center;
}

/* Stopka */
footer {
    font-weight: lighter;
    font-size: 1.1rem;
    background-color: #000F30;
    color: rgba(255, 255, 255, .7);
    text-align: center;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

@media (max-width: 425px) {
    footer {
        font-size: .65rem;
        margin-top: 30px;
    }
}

@media (max-width: 1024px) {
    footer {
        margin-top: 60px;
    }
}

.glow-point {
    display: inline;
    position: absolute;
}

.first-item .glow-point {
    left: 480px;
    bottom: 380px;
}

.second-item .glow-point {
    left: 460px;
    bottom: 400px;
}

.third-item .glow-point {
    left: 280px;
    bottom: 400px;
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .first-item:hover .glow-point {
        box-shadow: 0 0 500px 360px var(--glow-color);
    }

    .second-item:hover .glow-point {
        box-shadow: 0 0 500px 360px var(--glow-color);
    }

    .third-item:hover .glow-point {
        box-shadow: 0 0 500px 360px var(--glow-color);
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    .first-item:hover .glow-point {
        box-shadow: 0 0 500px 405px var(--glow-color);
    }

    .second-item:hover .glow-point {
        box-shadow: 0 0 500px 405px var(--glow-color);
    }

    .third-item:hover .glow-point {
        box-shadow: 0 0 500px 405px var(--glow-color);
    }
}

@media (min-width: 1920px) {
    .first-item:hover .glow-point {
        box-shadow: 0 0 500px 405px var(--glow-color);
    }

    .second-item:hover .glow-point {
        box-shadow: 0 0 500px 405px var(--glow-color);
    }

    .third-item:hover .glow-point {
        box-shadow: 0 0 500px 405px var(--glow-color);
    }
}

.item-description {
    color: rgba(255, 255, 255, .7);
    background: #000F30;
    opacity: .7;
    border-radius: 4px;
    padding: 20px;
}

@media (min-width: 1024px) {
    .item-description {
        max-height: 400px;
        margin: 40px;
        overflow-y: auto;
    }

    .item-description::-webkit-scrollbar {
        width: 0;
        background: transparent; /* make scrollbar transparent */
    }
}

.modal .modal-header {
    border-bottom: none !important;
}

.modal .modal-content {
    color: rgba(255, 255, 255, .7);
    background: #000F30;
}