/*Quality Excavation Style Sheet*/
/*Author Domanic*/
/*General Style sheed for multiple pages*/
/**********General START**********/
* {
    margin: 0;
    padding: 0;
    list-style-type:none;
    }
/* Header style sheet */
/***** Desktop Header *******/
.desktop-header-content {
    height: 80px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 120;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute items evenly */
    padding: 0 20px; /* Adjust horizontal padding */
}

    /* nagation bar style sheet */
.navbar{
    display: flex;
    align-items: center; /* Center navbar items vertically */   
    margin-left: 10px; /* Adjust margin to move navbar links closer to the logo */
}
.navbar a{
    color: #fff;
    font: normal 100% "proxima-nova-alt", Helvetica, Times, serif;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 15px;
    font-weight: 100;
    text-decoration: none;
    transition: color 0.3s ease;
    justify-content: flex-start; /* Align navbar items to the left */
}

.navbar a:hover{
        cursor: pointer;
        color: #FFD700;
}

.logo{
    vertical-align: middle;
    width: 120px;
    height: 80px;
    margin-right: 10px;
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/***** Mobile*******/
.mobile-header-content {
    height: 80px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 120;
}

/* Dropdown menu styles */    
.dropdown-menu{
    position: relative;
    display: inline-block;
}

.dropdown-menu-content {
    display: none;
    position: absolute;
    color: #fff;
    background-color: black;
    text-decoration: none;
    padding: 5px 0;
}

.dropdown-menu-content a{
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-button {
    background-color: darkgray;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-menu-content.show {
    display:block;
}
    
/*Footer Style Sheet*/
footer {
    display: flex;;
    bottom: 0;
    left:0;
    width: 100%;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0.5;
}

footer small {
    color: white;
}

/*MLA Format(For Multiple pages)*/
.format{
    margin-bottom:auto;
    margin-right: 10vh;
    margin-left: 10vh;
    padding: 0;
    font-size:200%;
    display:inline-block;
}
.format h1{
        font-weight: bolder;
        font: 24px,"proxima-nova-alt", Helvetica, Times, serif
}
.format h2{
    font-weight: bolder;
    font: 20px,"proxima-nova-alt", Helvetica, Times, serif
}
.format p{
    line-height:1.5;
    font: 14px,"proxima-nova-alt", Helvetica, Times, serif
}

/* Media query for mobile devices */
@media only screen and (max-width: 768px) {
    .format {
        margin-right: 5vw;
        margin-left: 5vw;
        font-size: 150%;
    }

    .format h1 {
        font-size: 20px;
    }

    .format h2 {
        font-size: 18px;
    }

    .format p {
        font-size: 12px;
    }
}
/**********General END**********/

/**********Home Page START**********/
/*disabels scrool bar on home page*/
.home{
    overflow: hidden;
    background-color: white;
}
.slide-show-container{
    position: relative;
    width: 100%;
    height: 90vh;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0vh; /* Ensure space below navbar */
}
.swiper{
    width: 70%; /* Ensure the Swiper container fills its parent */
    height: fit-content;; /* Allow the height to adjust based on content */
}
.swiper-slide img{
    width: 100%; /* Make images fill the width of their container */
    height: auto; /* Maintain aspect ratio */
    position: absolute; /* Change position to relative */
    top: 0; /* Remove margin-top */
}
.swiper-slide video{
    width: 100%; /* Make videos fill the width of their container */
    height: auto; /* Maintain aspect ratio */
}
.swiper .swiper-button-prev, .swiper .swiper-button-next{
    color: black;
    background-position: center;
    background-size: 2em; /* Adjust background size as needed */
    padding: 0.5em; /* Adjust padding as needed */
    border-radius: 50%; /* Use border-radius: 50% for a circle */
    border: 2px solid black;
}
.swiper .swiper-button-prev:hover, .swiper .swiper-button-next:hover{
    color: gold;
    background-color: white;
    opacity: 20%;
}
/* Adjust styles for smaller screens */
@media screen and (max-width: 768px) {
    .swiper .swiper-button-prev,.swiper .swiper-button-next {
        background-size: 1.5em; /* Decrease background size for smaller screens */
        padding: 0.3em; /* Decrease padding for smaller screens */
    }
    .swiper{
        width: 100%; /* Ensure the Swiper container fills its parent */
        height: fit-content;; /* Allow the height to adjust based on content */
    }
    .iframe-container {
        width: 400px; /* Set the width of the container */
        height: 300px; /* Set the height of the container */
        overflow: hidden; /* Hide any content that overflows the container */
    }

    .iframe-container iframe {
        width: 100%; /* Make the iframe fill the container width */
        height: 100%; /* Make the iframe fill the container height */
        border: none; /* Remove iframe border */
    }

}
/* Adjust styles for larger screens */
@media screen and (min-width: 1200px) {
    .swiper .swiper-button-prev,.swiper .swiper-button-next {
        background-size: 2.5em; /* Increase background size for larger screens */
        padding: 0.7em; /* Increase padding for larger screens */
    }
}
  
.swiper-pagination .swiper-pagination-bullet{
    cursor: pointer;
    height: 25px;
    width: 25px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.swiper-pagination .swiper-pagination-bullet:hover {
    background-color: yellow;
    color: gold;
}
.caption {
    position: absolute;
    top: 0; /* Position for images */
    left: 0;
    right: 0;
    color: white;
    width: 100%;
    background-color: #222;
    opacity: 50%;
    font-size: 24px;
    font-style: 'Times New Roman', serif;
    text-align: center;
}

.swiper-slide video + .caption {
    position: absolute;
    top: 0; /* Position for videos */
    left: 0;
    right: 0;
    color: white;
    background-color: #222;
    font-size: 24px;
    font-style: 'Times New Roman', serif;
    text-align: center;
}
/**********Home Page END**********/

/**********About Us Page START**********/
.aboutus-page{

}
/**********About Us Page ENDS/**********/
/**********CAREERS START/**********/
/*button style sheet*/
.careers-page{
    overflow-x: hidden;
    background-color: white;
    
}

.button-con{
    overflow: hidden;
    width: 425px;
}

.btn {
    display: flex;
    align-items: center;
    color: white;
    background-color: #2596be;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 32px;
    border-radius: 75px;
}

.btn img {
    width: 55px;
    height: auto;
}

.email{
    line-height: 2px;
    color: blue;
    font: normal 100% "proxima-nova-alt", Helvetica, times, serif;
    letter-spacing: 1px;
    padding: 10px 15px;
    font-weight: 100;
    text-decoration: none; 
}
.email:hover{
    color: red;
}
.btn:hover{
    color: black;
    background-color:white;
}
a{
    text-decoration: none;
}
img{
    width: 100px;
}
/*Mobile Styles*/
@media screen and (max-width: 768px) {
    .button-con {
        width: 100%; /* Make the button container full width */
    }
    
    .btn {
        font-size: 24px; /* Reduce font size for smaller screens */
    }
    
    .btn img {
        width: 40px; /* Reduce image size for smaller screens */
    }
}
/**********CAREERS ENDS/**********/
/**********PLAN ROOM START/**********/

.planroom-page{
    overflow-x: hidden;
    background-color: white;
}
/**********CAREERS ENDS/**********/