@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

body,
body * {
    font-family: 'Poppins', sans-serif;
}

.custom-nav {
    @apply 
    container 
    flex 
    flex-wrap 
    px-8 
    md:pl-20 
    md:pr-4 lg:pr-16 justify-between items-center mx-auto pt-6 relative z-10;
}

.overlay-background {
    background: rgba(0, 0, 0, 0.4)url(../images/light-background-sniped.png);
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
    margin-top: -5.25rem;
    padding-top: 4.25rem;
    min-height: 648px;
}

.product-header-banner {
    background: none;
    padding-top: 0px;
}
.product-header-banner .relative {
    padding-top: 2.5rem;
}

.second-page-image {
    background: rgba(0, 0, 0, 0.4)url(../images/second-page-first-banner.png);
    background-size: cover;
    background-position: center;
    min-height: 473px;
}

.error-page-bg-image {
    background: rgba(0, 0, 0, 0.4)url(../images/error404-bg.png);
    background-size: cover;
    background-position: center;
}

.app-bg-image {
    background: rgba(0, 0, 0, 0.4)url(../images/appreciation-image.png);
    background-size: cover;
    background-position: center;
}

.contact-bg-image {
    background: rgba(0, 0, 0, 0.4)url(../images/contact-form-image.png);
    background-size: cover;
    background-position: center;
    min-height: 624px;
}

.about-us-image {
    background: rgba(0, 0, 0, 0.4)url(../images/about-us-image.png);
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.whats-lux-image {
    background: rgba(0, 0, 0, 0.4)url(../images/top-side-image.png);
    background-size: cover;
    background-position: center;
    min-height: 495px;
}

.access-fabrics-image {
    background: rgba(0, 0, 0, 0.4)url(../images/accessories-fabric.png);
    background-size: cover;
    background-position: center;
    min-height: 495px;
}

.video-container {
    background: rgba(0, 0, 0, 0.4)url(../images/disposed-waste.png);
    background-size: cover;
    background-blend-mode: darken;
    min-height: 100vh;
    background-position: center;
}

.about-us-section {
    background: rgba(0, 0, 0, 0.4)url(../images/dine-before-footer.png);
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
}

.golf-second-page {
    background: rgba(0, 0, 0, 0.4)url(../images/golf-man.png);
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
    min-height: 298px;
}

.introduction-section {
    background: rgba(0, 0, 0, 0.4)url(../images/with-pen.png);
    background-size: cover;
    background-blend-mode: darken;
}

.bg-image-container {
    background: rgba(0, 0, 0, 40%)url(../images/sample.png);
    background-size: cover;
    background-position: center;
}

.bg-image-container:hover {
    transform: scale(1.004);
}

.golf-image-container {
    background: rgba(0, 0, 0, 40%)url(../images/pinseeker-golf-hole.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: darken;
    background-size: cover;
}

.max-container {
    overflow-x: hidden;
}

.banner-text li a {
    color: #2E4660;
}

body.add-blur>div:not(.max-container),
body.add-blur>div.max-container>header,
body.add-blur>div.max-container>main>*:not(#pop-container),
body.add-blur>div.max-container>footer {
    filter: blur(3px);
}

.scroll-icon {
    animation: spin 2s ease-in-out infinite;
}

@media (max-width: 678px) {
    .video-container {
        background: rgba(0, 0, 0, 0.4)url(../images/disposed-waste-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@media (min-width: 768px) {
    .overlay-background {        
        margin-top: -5.25rem;
        padding-top: 4.25rem;
        min-height: 500px;
    }

    .home-page-banner {
        min-height: 690px;
    }
    .second-page-image {
        min-height: 512px;
    }
    
    .app-bg-image {        
        min-height: 623px;
    }
    .whats-lux-image, 
    .access-fabrics-image {        
        min-height: 512px;
    }
    .golf-second-page {
        min-height: 480px;
    }
    .about-us-image {        
        min-height: 512px;
    }
    .about-us-section {        
        min-height: 100vh;
    }
    .product-header-banner {     
        padding-top: 0px;
    }
    .product-header-banner .relative {
        padding-top: 4.5rem;
    }
}

@media(min-width: 413px) {
    .hide-on-desktop {
        display: none;
    }
}

@media(max-width: 412px) {
    .hide-on-mobile {
        display: none;
    }
}