/******************************************************************* LICENSES *******************************************************************/

/* 
    Fonts used:
    1.- Roboto - Apache License 2.0
    2.- League Spartan - SIL Open Font License

    License files are located in the assets/fonts/licenses folder
*/

/******************************************************************* END LICENSES *******************************************************************/





/******************************************************************* GENERAL *******************************************************************/

@import url('roboto-stylesheet.css');
@import url('league-spartan-stylesheet.css');

:root {
    /*COLORS*/
    --blueComtech: #006BA6;
    --lightBlueComtechLinkDarkBackground: #3f86ac;
    --darkerBlueComtech: #00246B;
    --darkGrayComtech: #353B40;
    --lighterDarkGrayComtech: #6C6C6C;
    --lightGrayDetails: #D3D3D3;
    --lightGraySlide: #f3f3f3;
    --lightGrayDecoration: #fafafa;
    --whiteComtech: #FFF;
    --absoluteBlack: #000;
    --richBlack: #1A1A1A;

    /*FONT*/
    --body-font: 'Roboto', sans-serif;
    --heading-font: 'League Spartan', sans-serif;
    --special-number: 'Thasadith', sans-serif;
    --cursive-text: 'Satisfy', sans-serif;
    --title-large-line-height: 1.75rem;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    overflow-x: hidden;
}

body {
    background-color: var(--richBlack);
}

* {
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--heading-font);
    text-transform: uppercase;
}

/******************************************************************* END GENERAL *******************************************************************/


/***************************** HERO SECTION *****************************/

/* XXL - >= 1401px */

#hero-section {
    height: 100vh;
    width: 100vw;
    margin-top: -92px; /* Adjust this value based on the height of your navbar */
    margin-right: 0;
    padding-right: 0;
    max-width: 100%;
    overflow: hidden;
}

#hero-section-photo {
    height: 65vh;
    overflow: hidden;
    background-color: #ececec;
    object-position: center center;
    margin-top: -92px; /* Adjust this value based on the height of your navbar */
    overflow: hidden;
}

.container-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center center;
    max-width: 100%;
}

.container-image-int {
    width: 100vw;
    height: 65vh;
    object-fit: cover;
    object-position: top center;
    max-width: 100%;
}

#hero-video {
    object-fit: cover;
    object-position: center center;
    max-width: 100%;
}

#hero-text-container {
    position: absolute;
    width: 100%;
    bottom: 15rem; /* Positions text slightly above bottom */
    z-index: 10; /* Keeps it above the video */
    text-align: center;
    color: #ffffff; /* White text for contrast */
    text-shadow: 2px 2px 5px var(--darkGrayComtech);
}