/* HEADER */

.header-container {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
    background-color: rgba(34, 34, 34, 0.5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(250, 250, 250, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo-img {
    width: 20%;
}

.logo-border {
    border: 0.2em solid white;
}

.header-container .nav-link {
    color: #F1F1FF !important;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    font-size: 1.2rem !important;
}

.header-container .nav-link:hover {
    background-color: transparent;
    transform: scale(1.1);
}

/* BODY */

body {
    background-size: cover;
    background-blend-mode: normal;
    background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed;
    height: 100vh;
}

/* SMALL PHONES */
@media (max-width: 576px) and (max-height: 932px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 80%;
    }
}

/* IPAD MINI / AIR PORTRAIT */
@media (min-width: 577px) and (max-width: 768px) and (max-height: 1024px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 80% -70%;
    }
}

/* IPAD MINI / AIR LANDSCAPE */
@media (min-width: 1024px) and (max-width: 1180px) and (max-height: 820px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 80% 20%;
    }
}

/* SMALL LAPTOPS */
@media (min-width: 769px) and (max-width: 992px) and (max-height: 1180px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 80% 200%;
    }
}

/* SURFACE PRO 7*/
@media (min-width: 769px) and (max-width: 992px) and (max-height: 1368px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 80% 150%;
    }
}

/* IPAD PRO PORTRAIT */
@media (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 80% 135%;
    }
}

/* NEST HUB*/
@media (min-width: 1024px) and (max-width: 1025px) and (max-height: 600px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 80% 10%;
    }
}

/* IPAD PRO LANDSCAPE */
@media (min-width: 1200px) and (max-width: 1600px) {
    body {
        background-size: cover;
        background-blend-mode: normal;
        background: linear-gradient(135deg, rgba(0, 155, 206, 0.8), rgba(0, 155, 206, 0.8), rgba(246, 160, 53, 0.5)) fixed, url(../src/img/QBG.png) no-repeat fixed 70% -50%;
    }
}


/* FOOTER */

.footer-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3;
    border-top: 1px solid rgba(250, 250, 250, 0.2);
    background-color: rgba(34, 34, 34, 0.5);
    backdrop-filter: blur(10px);
}

.footer-logo-img {
    width: 40%;
    height: auto;
}

@media (max-width: 500px) {
    .footer-logo-img {
        width: 120%;
        height: auto;
    }
}

@media (min-width: 500px) and (max-width: 768px) {
    .footer-logo-img {
        width: 80%;
        height: auto;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .footer-logo-img {
        width: 80%;
        height: auto;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .footer-logo-img {
        width: 60%;
        height: auto;
    }
}

.footer-container .nav-link {
    color: #F1F1FF !important;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem !important;
}

.footer-container .nav-link:hover {
    background-color: transparent;
    transform: scale(1.1);
}

.footer-container .social-icons {
    color: #F1F1FF !important;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.footer-container .social-icons :hover {
    background-color: transparent;
    transform: scale(1.1);
}