body, html{
    background-color: black;
}

*{
    /*background-color:black;*/
    margin:0;
    font-family:arial;
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

.page-box{
    min-height:100vh;
    position: relative;
}

video{
    height:100vh;
    width:100%;
    object-fit: cover;
    z-index:0;
    position: fixed;
}

#nav-bar {
    z-index: 100; /* Ensure it stays above the video */
    min-height: 75px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    position: fixed; /* This keeps it at the top */
    top: 0; /* Ensures it sticks to the top */
    left: 0;
    /*border-bottom:1px solid #333;*/
}

/* #nav-bar::after {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background-color: #333;
    margin: 0 auto;
} */

#nav-bar img{
    height:60px;
}




#nav-bar {
    display: flex;
    align-items: center;
    gap: 20px; /* Adjust spacing */
    flex-wrap:wrap;
    z-index: 100;
}

#nav-bar a {
    text-decoration: none;
    color: #000;
    height: 75px;
    min-width: 200px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 100;
}

#logo-container{
    display:flex;
    justify-content: center;
    align-items: center;
    height:75px;
}

@media (max-width: 768px) {
    #logo-container{
        width:100%;
        flex-wrap:nowrap;
    }
    
    #nav-bar a{
        min-width:80px;
    }
}

#nav-bar a::after {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    opacity: 0;
    font-size: 18px;
    transition: transform 0.3s ease-out, bottom 0.3s ease-out, opacity 0.3s;
}

/* First link - Outline Square */
#nav-bar a:nth-of-type(1)::after {
    content: "■"; /* Unicode for outline square */
}

/* Second link - Outline Circle */
#nav-bar a:nth-of-type(4)::after {
    content: "●"; /* Unicode for outline circle */
}

/* Third link - Filled Triangle */
#nav-bar a:nth-of-type(3)::after {
    content: "▲"; /* Unicode for filled triangle */
}

/* Fourth link - X */
#nav-bar a:nth-of-type(2)::after {
    content: "✖"; /* Unicode for 'X' */
}

#nav-bar a:hover {
    background-color: rgba(98, 98, 98, 0.5);
    transition: background-color 0.2s;
}

#nav-bar a:hover::after {
    bottom: 5px; /* Moves into position under the text */
    transform: translateX(-50%) rotate(360deg);
    opacity: 1;
}




#work-for-us{
    min-height:calc(100% - 100px);
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:relative;
    z-index: 5;
}

#work-for-us h1{
    font-size:500%;
    color:white;
    text-transform:uppercase;
    text-align:center;
}

#work-for-us a{
    margin-top:10px;
    background-color:#990000;
    height:50px;
    font-size:125%;
    padding:10px;
    display:flex;
    justify-content: center;
    align-items:center;
    text-decoration:none;
    color:white;
}

#about-us{
    /*background-color:#990000;*/
    z-index: 10;
}



.box {
    max-width:70%;
    overflow:hidden;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0; /* Initially hidden */
    transform: translateY(30px); /* Starts slightly below */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    background-color:#990000;
    padding:5px;
}

@media (max-width: 768px) {
    .box{
        flex-direction: column;
    }
}


.box.show {
    opacity: 1;
    transform: translateY(0);
}

.content{
    padding:50px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image:url(../Images/psbg.jpg);
}

.content h1{
    margin-bottom:50px;
}

#red-col{
    color:#990000;
}

.content h2{
    text-align:center;
    color:white;
    font-size:300%;
}

.box img{
    max-height:300px;
    max-width:90%;
}

.box p{
    padding:15px;
    color:#ccc;
}

.box-line{
    height:400px;
    width:15px;
    margin:15px;
    margin-bottom:25px;
    background-color:rgba(255, 255, 255, 0.442);
}

.spacer{
    height:200px;
    width:100%;
}

footer{
    min-height:300px;
    width:100%;
    background-color:#111;
    color:white;
    display:flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    padding:5px;
    z-index:10;
    position:absolute;
}

footer p{
    width:80%;
    text-align:center;
}

footer a{
    text-align:center;
}


.page-bg {
    top: 0;
    height: 800px;
    object-fit: cover;
    width: 100%;
    position: absolute;
    opacity: 0.8;

    /* Apply gradient fade */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}