/* CSS variables for font size and spacing */
:root {
--desktop-font-size: 16.5px;
--mobile-font-size: 15px;
--title-desktop-font-size: 41.5px;
--title-desktop-font-line-height: 44px;
--title-mobile-font-size: 23px;
--title-mobile-font-line-height: 30px;
}


/* Reset margins and paddings */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


@font-face {


    font-family: 'HelveticaNowDisplay';
    src: url('HelveticaNowDisplay-Regular.woff2') format('woff2'),
    url('HelveticaNowDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

font-variant-ligatures: common-ligatures contextual;
font-feature-settings: "kern", "liga", "clig", "calt";
}



body {
font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
overflow: hidden;

line-height: 1.5; /* Improve readability */
letter-spacing: 0.2px; /* Subtle spacing adjustment */

-webkit-font-smoothing: antialiased !important; /* Smooth rendering on WebKit */
-webkit-font-smoothing: subpixel-antialiased;
font-kerning: normal; /* Enable kerning */
text-rendering: optimizeLegibility !important; /* Ensure legible rendering */
    background:black;
    color:white;

}


h4 {
    margin: 0;
    padding: 0;
    font-size: var(--title-desktop-font-size);
    letter-spacing: -1px;
    line-height: var(--title-desktop-font-line-height);
    font-weight: normal;
    margin-bottom: 30px; /* Space between h4 and p */
}

p {margin: 0;
    padding: 0;
    font-size: var(--desktop-font-size);
    font-weight: normal;
    text-transform: none
 display: block; /* Ensure block-level formatting */
}




a{
    text-decoration: none;
    color:#fff;
}

a:hover {
    text-decoration: none;
    color:#666;
    border-bottom: 1px solid #666;
}



@media (max-width: 768px) {
:root {
--desktop-font-size: var(--mobile-font-size);
--title-desktop-font-size: var(--title-mobile-font-size);
--title-desktop-font-line-height: var(--title-mobile-font-line-height):
    
    }
}




img {
    width: 100vw; /* Ensures the image takes the full width of the viewport */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Avoids inline spacing issues */
    margin: 0; /* Removes any potential default margins */
    padding: 0; /* Removes padding */
}

        

        /* Fullscreen video background */
        #videosToPlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            z-index: -2;
        }

        /* Black overlay */
        #blackOverlay {
            height: 100vh;
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
            background: #000;
            opacity: 1;
        }

        
        
        /* Centered content */
.content {
    left: 0;
    top: 0;
    width: 90vw; /* Matches the viewport width */
    height: 100vh; /* Optional: matches the viewport height */
    display: flex; /* Centers the image if needed */
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
}

                
        

        /* Logo */
        .content img {
            width: auto;
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* Text block below the logo */
        .text-block {
            width:800px;
            font-size: var(--desktop-font-size);
            line-height: 1.5;
            color: #fff;
            position: absolute; /* Will be positioned dynamically with JS */
            visibility:hidden;
        }

        /* Top and bottom centered text */
        .bottom-text {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: var(--desktop-font-size);
            color: #fff;
            text-align: center;
        }



        .bottom-text {
            bottom: 25px;
        }





/* About page */



 .container {
            height: 100vh;
            scroll-snap-type: y mandatory;
            overflow-y: auto; /* Allow vertical scrolling */
            padding-top: 0px; /* Add some space on top */
        }

        .page {
            height: calc(100vh); /* Make each slide slightly smaller to show part of the next */
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            scroll-snap-align: start;
            margin-bottom: 150px; /* Ensure there's space for the next slide */
                display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
        }


.page {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
}

.page h4, .page p {
    flex: 0 0 auto; /* Maintain default block-level behavior */
    width: 100%; /* Ensure full-width layout for both */
    text-align: center; /* Center align text */
    margin-bottom: 10px; /* Space between h4 and p */
}



        .about-us, .contact {
            text-align: center;
            padding: 20px;
            padding-left: 150px;
            padding-right: 150px;
            
        }

.selected{border-bottom: 1px solid #ccc;}
#about-us-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire container */
    z-index: -1; /* Places the video behind the text content */
}

.about-us {
    position: relative; /* Ensure the video stays within the div */
    overflow: hidden; /* Prevents the video from spilling outside the div */
}

.about-content {
    position: relative; /* Allows the text content to appear above the video */
    z-index: 1; /* Ensures the content stays above the video */
    padding: 20px; /* Add padding as needed */
    text-align: center; /* Center-align the content */
    color: white; /* Ensures text is readable */
}

.page .about-us{ display: block;}
        .services {
            display: flex;
            flex-direction: row;
        }

.services .image {
    width: 50%;
    height: 100vh; /* Full height of the viewport */
    overflow: hidden; /* Ensures that if the image is larger, it won't spill out */
    display: flex;
    justify-content: center;
    align-items: center;
}

.services .image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container and maintains aspect ratio */
}

        .services .text {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            padding-left: 90px;
            padding-right: 90px;
        }


/* Mobile-specific layout adjustments */
@media (max-width: 768px) {
    .page.services {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align content */
        height: auto; /* Allow container to expand naturally */
    }

    .services .image {
        width: 100%; /* Full width for the image */
        height: auto; /* Allow height to adjust based on the image */
    }

    .services .image img {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
    }

    .services .text {
        width: 100%; /* Full width for the text */
        padding: 20px; /* Reduce padding for smaller screens */
        text-align: center; /* Center-align text */
    }
}

/* Container for the top navigation */
.top-text {
    display: flex;
    justify-content: space-between; /* Separate left and right items */
    align-items: center; /* Align items vertically */
    background-color: none; /* Background color of the navbar */
    padding: 40px 80px; /* Vertical padding */
    position: fixed; /* Fix the navbar at the top of the page */
    top: 0;
    width: 100%; /* Full width */
    z-index: 1000; /* Ensure it's above other content */
    box-sizing: border-box; /* Include padding in width calculation */
    mix-blend-mode: difference; /* Makes text visible on light and dark backgrounds */
     -webkit-font-smoothing: antialiased;
}

/* Left item styling */
.left-item {
    margin-left: 25px; /* Position UG 25px from the left */
    margin-right: auto; /* Push the rest of the items to the right */
}

/* Right items container */
.right-items {
    display: flex; /* Horizontally align the right items */
    gap: 50px; /* 50px space between right items */
    margin-right: 25px; /* Position the items 25px from the right */
}

.right-items p {
    margin: 0; /* Remove default margin */
}

.right-items a {
    text-decoration: none; /* Remove underline */
    color: white; /* Text color */
    font-weight: bold; /* Make text bold */
    text-transform: uppercase; /* Optional: Transform text to uppercase */
}

/* Anchor tags inside the left item */
.left-item a {
    text-decoration: none; /* Remove underline */
    color: white; /* Text color */
    font-weight: bold; /* Make text bold */
    text-transform: uppercase; /* Optional: Transform text to uppercase */
}



/* Mobile styles */
@media (max-width: 768px) {
    .top-text {
        padding: 40px; /* Adjust padding */
    }

    .left-item {
        margin: 0; /* Remove left margin */
    }

    .right-items {
        display: none; /* Hide the right items */
    }


    
    
            .about-us, .contact {
            padding-left: 45px;
            padding-right: 45px;
            
}