/* Font Face Declarations */

@font-face {
    font-family: 'linux_biolinum';
    src: url('fonts/linbiolinum_r-webfont.woff2') format('woff2'),
         url('fonts/linbiolinum_r-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'linux_biolinum';
    src: url('fonts/linbiolinum_rb-webfont.woff2') format('woff2'),
         url('fonts/linbiolinum_rb-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'linux_biolinum';
    src: url('fonts/linbiolinum_ri-webfont.woff2') format('woff2'),
         url('fonts/linbiolinum_ri-webfont.woff') format('woff');
    font-weight: normal; /* Italic is treated separately */
    font-style: italic;  /* This will enable the italic style */
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.link-style {
    text-decoration: none;
    color: lightskyblue;
}



.link-style:hover {
    text-decoration: underline; /* Optional for hover effect */
}


.link-style-2 {
    text-decoration: none;
    color: lightskyblue;
    font-size: 25px;
}




html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: 'linux_biolinum', serif; /* Corrected font-family name */
    font-size: 25px;
    background-color: black;
    color: black;
    scroll-behavior: smooth;
}

/* Header and Navigation */
.header-box {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background-color: transparent;
    font-variant: small-caps;
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    width: 100%;
}

nav {
    display: flex;
    gap: 10px;
    margin-right: 15px;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    padding: 5px 10px;
}

/* Menu Icon */
.menu-icon {
    display: none; /* Hidden by default */
    font-size: 30px;
    cursor: pointer;
}





/* Ensure video and containers don't overflow */
.video-box {
    width: 100vw; /* Set width to viewport width */
    overflow: hidden; /* Ensure no content spills over */
}

.content {
    max-width: 100vw; /* Prevent the content section from overflowing horizontally */
}

/* Video Box */
.video-box {
    position: relative; /* Changed from fixed to relative */
    top: 0;
    left: 0;
    width: 100vw;      /* Full width of the viewport */
    height: 100vh;     /* Full height of the viewport */
    overflow: hidden;  /* Hide overflow */
    z-index: 5;        /* Lower than header to allow interaction */
}

video {
    width: 100%;       /* Full width */
    height: 100%;      /* Full height */
    object-fit: cover; /* Maintain aspect ratio while covering */
}


.video-box, #videoPlayer {
    visibility: visible !important;
    z-index: 1 !important;
}


/* Overlay Text Styles */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(0.8);
    display: inline-block;
    transform-origin: bottom;
    color: white;
    /* font-size: 150px */
    font-size: clamp(3.0rem, 7.5vw, 5.0rem);
    text-align: center;
    font-variant: small-caps;
    letter-spacing: -0.02em; /* Adjusted for reduced spacing */
    font-weight: 300;
    pointer-events: none;
}

/* Outer Box Specific Styles */
.outer-box1, .outer-box2, .outer-box3, .outer-box4, .outer-box5, .outer-box6,
.outer-box-index, .outer-store-box, .outer-box-contact, .outer-box-thank-you{
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Changed from 'top' to 'flex-start' */
    position: relative;
    width: 100%;
    height: 100vh; /* You might want to adjust these heights for proper content flow */
    padding: 0;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: left;
}

.outer-box1 {
    background-image: url('images/about/ab1 1280x720.webp');
}

/*

.outer-box2 {
    background-image: url('images/about/ab2 1280x720.webp');
}

.outer-box3 {
    background-image: url('images/about/ab3 1280x720.webp');
}

.outer-box4 {
    background-image: url('images/about/ab4 1280x720.webp');
}

.outer-box5 {
    background-image: url('images/about/ab5 1280x720.webp');
}

.outer-box6 {
    background-image: url('images/about/ab6 1280x720.webp');
}

*/

.outer-box-index {
    background-image: url('images/avail 0.webp');
}


.outer-box-contact {
    background-image: url('images/bg_contact.webp');

}

.inner-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: clamp(40px, 2.5vw, 100px); 
    color: white; /* Text color */
    padding: 0vw 25vw;
    box-sizing: border-box; /* Ensures padding is included in width */
}

.footer-box-1 {
    padding: 15px 50px 15px 50px;
    font-size: 21px;
    background-color: #4c4c4c;
    color: white;
    text-align: center;
}

.footer-box-2 {
    padding:  0px 50px 5px 50px;
    font-size: 21px;
    font-variant: small-caps;
    background-color: white;
    color: black;
    text-align: center;
}

.footer-box-3 {
    padding:  0px 20px 25px 20px;
    font-size: 15px;
    background-color: white;
    color: black;
    text-align: center;
}


.footer-box-logo {
    background-color: white; /* White background for the outer box */
    padding: 15px 0 0 0;
    margin: 0 auto;
    text-align: center;
    width: 100%; /* Box is 20% of screen width */
    max-width: ; /* Limit how big it can get */
    min-width: ; /* Limit how small it can get */
}

.logo-image {
    max-width: 120px; /* Image scales to fit the box */
    min-width: 90px;
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
}




.custom-logo {
    font-size: 34px; /* Default size */
    color: var(--logo-color, #444444); /* Customizable default color */
    display: inline-block; /* Adjust display if needed */
    transform: scaleY(0.85); /* Reduces the height of characters to x% */
    font-variant: small-caps;
    letter-spacing: 0.01em; /* Adjusted for reduced spacing */
    font-weight: 600;
    text-decoration: none;
}

.custom-logo .first-letter {
    color: var(--first-letter-color, #cccccc); /* Customizable first-letter color */
}


/***************** Specific to AVAILABILITY page */


/* Specific to P R O D U C T page  (css currently on prod page) */



/* Specific to C O N T A C T page */


/* Contact Form Container */

.inner-box-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 35px;
    color: white; /* Text color */
    padding: 0px 300px;
    box-sizing: border-box; /* Ensures padding is included in width */
}


.contact-form-container {
    max-width: 600px;
    margin: 0 auto; /* Center form */
    padding: 20px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.1); /* Optional styling */
    border-radius: 10px;
}

.contact-form label {
    display: block;
    margin: 15px 0 5px 0;
    color: white;
    font-size: 18px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    font-size: 16px;
}

.contact-form button {
    padding: 10px 20px;
    font-size: 18px;
    color: white;
    background-color: #333;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #555;
}

.contact-heading {
    font-size: 25px; /* Adjust this size as needed */
    font-weight: normal; /* Optionally make it bold */
    color: white; /* Optionally change the color */
}
 


/* Specific to T H A N K  Y O U */

.outer-box-thank-you {
        background-image: url('images/thank_you/webIMG m6 _thank_you_1920.webp');
}



.inner-box-thank-you {
    display: flex;
    flex-direction: column; /* Stack the divs vertically */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 35px;
    color: white; /* Text color */
    background-color: rgba(50, 50, 50, 0.3);
    padding: 0px 200px;
    box-sizing: border-box; /* Ensures padding is included in width */
}



    @media (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
        
        .tablet-landscape-video {
            display: block;
        }

        .outer-box2 {
            background-image: url('images/about/ab2 1280x720.webp');
        }
        
        .outer-box4 {
            background-image: url('images/about/ab4 1280x720.webp');
        } 


        .overlay-text {

        }
    
        .inner-box {

        }

         .inner-box-contact {
            font-size: 40px; 
            padding: 0px 0px;
        }


        .footer-box-1 {
            padding: 15px 40px 15px 40px;
            }                                   
    }



    @media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    
        .tablet-portrait-video {
            display: block;
        }

        .outer-box2 {
            background-image: url('images/about/ab2 630x1120.webp');
        }
        
        .outer-box4 {
            background-image: url('images/about/ab4 630x1120.webp');
        } 

        .overlay-text {
        font-size: 100px;
        }
    
        .footer-box-1 {
            padding: 15px 30px 15px 30px;
        }                                   
            
        .inner-box {

        }
        
        .inner-box-contact {
            font-size: 30px; 
            padding: 0px 0px;
        }

        .logo-image {
            width: 230px;
        }


        .outer-box-thank-you {
            background-image: url('images/thank_you/webIMG m6 _thank_you_540.webp');
        }

    }


    
    @media (max-width: 767px) {

        .mobile-video {
            display: block;
        }

        .overlay-text {
            font-size: 80px;
        }

        /* Show the menu icon on mobile devices */

        .menu-icon {
            display: block;
            z-index: 100; /* High z-index */
            margin-right: 5px
        }

        nav {
            display: none;
            flex-direction: column;
            align-items: flex-end;
            background-color: lightblue;
            position: absolute;
            top: 60px;
            right: 10px;
            z-index: 1;
        }

        nav a {
            color: black;
            text-decoration: none;
            font-size: 20px;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background-color 0.3s;
            font-variant: small-caps;
        }

            .outer-box2 {
                background-image: url('images/about/ab2 630x1120.webp');
            }  
        
            .outer-box4 {
                background-image: url('images/about/ab4 630x1120.webp');
        }   

        .inner-box {
            font-size: clamp(1.1rem, 2.0vw, 1.5rem); 
            
        }

        .inner-box-contact {
            font-size: 35px; 
            padding: 0px 20px;
        }

        .footer-box-1 {
            padding: 20px 20px 20px 20px;
            font-size: 19px;
        }
        

        .logo-image {
            width: 230px;
        }


        .footer-box-3 {
            padding:  0px 10px 20px 10px;
            font-size: 13px;
        }



        .inner-box-thank-you {
            font-size: 25px;
            color: white; /* Text color */
            padding: 0px 50px;
        }

        .logo-image-top {
            width: 120px;
        }

        .contact-heading {
            font-size: 20px;
   
        }

        .link-style-2 {
            font-size: 20px;
        }


        .overlay-text {
            font-size: 60px;
        }




    }