:root {
    --accent-color: #073869;
    --accent-color-light: #c9d3de;
    --accent-color-alt: #062d53;
    --accent-color-hover: rgb(5, 34, 65);
}

body {
}
.nameContainer table {
    width: 270px;
}
.nameContainer table p {
    font-size: large;
    text-align: center;
    margin: 0 auto;
}
#loadingContainer { 
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    transition: opacity 0.5s;
    background-color: black;
}
#navbar {
    width: 100%;
    height: 60px;
    margin: 0 0;
    background-color: black;
}
#navlogo {
    float: left;
    width: 60px !important;
    display: block;
}
.nav {
    float: right;
    color: white;
}
body {
   margin: 0;
}
#navlogo img {
    height: 60px;
}
.block {
    height: 70px;
    width: 100%;
    background-color: black;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: height 0.4s, opacity 0.4s;
    background-size: cover;
    background-position: center;
    background-color: black;
}
.block *:not(button) {
    color: white;
}
.block * {
    font-family: 'Ubuntu';
    text-align: center;
    margin: 0;
}
.block button {
    padding: 10px 10px;
    border-radius: 10px;
    border: none;
    background-color: white;
}
.block img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make sure the image covers the container */
    opacity: 0.4;
}
.block button:hover {
    background-color: whitesmoke;
}
.blockcontent {
    z-index: 1;
    position: absolute;
}
.overlay {
    overflow: hidden;
    object-fit: contain;
    width: 100%;
    background-color: black;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}
.block:hover {
    height: 85px;
    opacity: 1;
}
.img1 {
    background-image: url("assets/block2.jpg");
}
.img2 {
    background-image: url("assets/block1.jpg");
}
.img3 {
    background-image: url("assets/block3.jpg");
}
.img4 {
    background-image: url("assets/block4.jpg");
}
.blocks:has(.block:hover) .block:not(:hover) {
    opacity: 0.2;
}
.blocks:has(.block:active) .block:not(:active) {
    transition: opacity 0.1s, height 0.4s;
    opacity: 0.1;
}

.imageReel {
    width: 100%;
    border-collapse: collapse;
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.imageReel tr {
    border: none;
    margin: 0;
    padding: 0;
    height: 25vw;
    overflow: hidden;
}
.imageReel tr td {
    width: 25vw;
    overflow: hidden;
    border: none;
    margin: 0;
    padding: 0;
    
}
.imageReel tr td img {
    width: 25vw;
    object-fit: cover;
    height: 25vw;
    margin: auto;
    padding: auto;
    display: block; 
    transition: opacity 0.4s, width 0.4s, height 0.4s;
}

.imageReel tr td.square2x2 {
    width: 50vw;
    height: 50vw;
    overflow: hidden;
    border: none;
    margin: 0;
    padding: 0;
}
.nav#links {
    margin-right: 25px;
    position: absolute;
    right: 0px;
}
.nav#links a {
    height: 60px;
    color: white;
    text-decoration: none;
    font-family: "Ubuntu";
    display: inline-flex;
    padding: 0 10px;
    align-items: center;
}
.imageReel tr td.square2x2 img {
    width: 50vw;
    height: 50vw;
    object-fit: cover;
    margin: auto;
    padding: auto;
    display: block;
}


.imageReel:has(td:hover) tr td:not(:hover) img.hoverable {
    opacity: 0.4;
    width: 20vw;
    height: 20vw;
}
.imageReel:has(td:hover) tr td.square2x2:not(:hover) img.hoverable {
    width: 45vw;
    height: 45vw;
}
.phototeaser {
    display: grid;
    grid-template-columns: 30% auto;
    grid-template-rows: 100%;
}
.grid1 {
    grid-area: 1 / 1 / 2 / 2;
}
.grid2 {
    grid-area: 1 / 2 / 2 / 3;
}
#rpHeading {
    width: 100%;
    text-align: center;
    font-family: "Ubuntu";
    font-weight: 500;
    font-size: 24px;
}
.photos {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, min(150px, 15%));
    grid-gap: 10px;
    margin: 15px 10px;
}



.photo1 {
    grid-area: 1 / 1 / 2 / 2;
}
.photo2 {
    grid-area: 1 / 2 / 2 / 3;
}
.photo3 {
    grid-area: 1 / 3 / 2 / 4;
}
.photo4 {
    grid-area: 1 / 4 / 2 / 5;
}

#photo1 img, #photo2 img, #photo3 img, #photo4 img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.flex {
    display: flex;
    width: 100%;
}
.buttoncontainer, .photoscontainer {
    justify-content: center;
}
.rpbutton {
    border: none;
    border-radius: 25px;
    padding: 15px;
    font-size: 16px;
    background-color: #073869;
    color: white;
    font-family: 'Ubuntu';
    font-weight: bolder;
    transition: background-color 0.2s;
}
.unselected {
    opacity: 0.5;
}
.reelPreview {
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}
.phototeaser {
    background-color: rgb(240, 240, 240);
}
#photo1, #photo2, #photo3, #photo4 {
    display: block;
}
#rpimg1, #rpimg2, #rpimg3, #rpimg4 {
    display: block;
}
#rpHeading {
    padding: 0;
    margin: 0;
}
.lander {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 400px;
    background: linear-gradient(#073869, #073869), url("assets/eds.png");
    background-blend-mode: color;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.landerOverlay {
    width: 100%;
    height: 400px;
    background-color: var(--accent-color);
    opacity: 0.8;
    background-blend-mode: color-burn;
    z-index: 0;
    position: absolute;
}
.aboutButton {
    background-color: var(--accent-color);
    border: none;
    color: white;
    font-family: "Ubuntu", sans-serif;
    font-size: large;
    padding: 12px;
    border-radius: 12px; 
}
.splittersegment {
    margin: 0;
    padding: 0;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.landerContent {
    position: relative;
    z-index: inherit;
}
.flexDisplay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.aboutUs {
    height: 500px;
}
.aboutGrid1, .aboutGrid2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.aboutUs {
    display: grid;
    grid-template-columns: 30% auto;
}
.projectL, .projectR {
    height: 150px;
    display: grid;
}
.projectL {
    background-color: var(--accent-color);
    grid-template-columns: 150px auto;
    transition: grid-template-columns 0.5s, height 0.5s;
}
.projectR {
    background-color: var(--accent-color-alt);
    grid-template-columns: auto 150px;
    transition: grid-template-columns 0.5s, height 0.5s;
}
.projectImage img {
    transition: width 0.5s, transform 0.5s;
    float: top;
    width: 150px;
    object-fit: cover;
    aspect-ratio: 1;
}
.projectL .projectImage {
    grid-area: 1 / 1 / 2 / 2;
    text-align: left;
    float: left;
}
.projectText {
    display: flex;
    justify-content: center;
    align-items: center;
}
.projectL .projectText {
    grid-area: 1 / 2 / 2 / 3;
}
.projectR .projectImage {
    grid-area: 1 / 2 / 2 / 3;
}
.projectR .projectText {
    grid-area: 1 / 1 / 2 / 2;
}
.pTextContent .pTitle, .pTextContent .pDesc {
    color: white;
    font-family: "Ubuntu";
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}
.pTextContent .pTitle {
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 36px;
    transition: font-size 0.5s;
}
.pTextContent .pDesc {
    height: 25px;
    overflow: hidden;
    margin-top: 6px;
    font-size: 20px;
}
.projectL.active {
    grid-template-columns: 0 auto;
}
.projectL.active img {
    transform: translateX(-100%);
}
.projectR.active {
    grid-template-columns: auto 0;
}
.projectR.active img, .projectL.active img {
    width: 75px;
}
.projectR.active .pDesc, .projectL.active .pDesc {
    height: 0px;
    margin: 0;  
}
.pDesc {
    transition: height 0.5s;
}
.projectR.active .pTitle, .projectL.active .pTitle {
    font-size: 24px;
}
.projectR.active, .projectL.active {
    height: 75px;
}
.projectReelImg {
    margin: 0;
    padding: 0;
    display: block;
    width: 20vw;
    aspect-ratio: 1;
    object-fit: cover;
}
.images table, .images tr, .images td {
    border: none;
    border-spacing: 0;
    margin: 0;
    padding: 0;
}
.projectReel .images {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}
.images.expanded {
    transition: none;
}
.splittergrid {
    display: flex;
    justify-content: center;
    align-items: center;
}
.iconbg {
    background-color: white;
    border-radius: 100%;
    width: 100px;
    height: 100px; 
}
.pointHeading, .pointDescription {
    color: white;
    font-family: "Ubuntu";
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
.point {
    margin: 30px 0;
}
.iconcontainer {
    display: flex;
    width: 100%;
    justify-content: center;
}
.pointHeading {
    margin: 20px 0 6px 0;
    font-size: 20px;
    font-weight: bolder;
    text-transform: uppercase;
}
.contactButton {
    border: 0px solid var(--accent-color);
    background-color: #EEEEEE;
    color: var(--accent-color);
    font-family: "Ubuntu";
    font-size: 24px;
    padding: 16px;
    border-radius: 12px;
    margin: 20px;
    transition: box-shadow 0.1s;
}
.contactButton:hover {
    box-shadow: inset 0 0 10px 1px var(--accent-color);
}
.contactHeader {
    color: black;
    font-family: 'Ubuntu';
    font-weight: bold;
    width: 100%;
    text-align: center;
    font-size: 24px;
}
.contact {
    padding: 10px 0px;
}
.contactButtonHeader {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}
.footer {
    background-color: black;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
}
.footergrid {
    display: grid;
    width: 100%;
    margin: 0 10px;
    grid-template-columns: 100px 1fr 200px;
}
.fg1 {
    grid-area: 1 / 1 / 2 / 2;
}
.fg2 {
    grid-area: 1 / 2 / 2 / 3;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fg3 {
    grid-area: 1 / 3 / 2 / 4;
}
.footerText {
    font-family: 'Ubuntu';
    color: darkgray;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
.icon {
    color: white;
    transition: color 0.2s;
}
.brandsgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 100%;
}
.icon1, .icon2, .icon3 {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.icon.fa-x-twitter:hover {
    color: darkgray;
}
.icon.fa-instagram:hover {
    color: #C13584;
}
.icon.fa-facebook:hover {
    color: #1877F2;
}
.dynamicWord1, .dynamicWord2 {
    color: var(--accent-color-light) !important;
    margin: 10px;
    transition: opacity 0.6s, filter 0.6s ease-out, width 0.6s; 
    filter: blur(0px);
}
.heading p, .heading span {
    font-size: 52px; width: 100%; text-align: center; font-family: 'Ubuntu'; font-weight: bold;
}
.heading.vanilla span {
    color: white; margin: 0; padding: 0;
}
.heading, .heading span, .heading p {
    display: inline-block;
}
.header {
    display: flex;
    justify-content: center;
    width: 100%;
}
#rpButton:hover {
    background-color: var(--accent-color-hover);
}
.headerContainer {
    padding: 0;
}
.heading.effect {
    width: 250px;
}
#heading1 {
    margin-right: -10px;
}
#heading3 {
    margin-left: 10px;
}
#heading4 {
    margin-left: -10px;
}
#heading5 {
    margin-left: 10px;
}
.splitter, .splitter2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.flavor {
    font-family: "Ubuntu";
    font-size: 24px;
}
.flavor .colored {
    color: var(--accent-color);
    font-weight: bold;
}
.splittercontainer {
    display: flex;
    justify-content: center;
    background-color: var(--accent-color-alt);
}
.splitter2 {
    background-color: var(--accent-color);
}
.splitter2 .flavor {
    color: white;
}
.pointicon {
    color: var(--accent-color);
    transition: font-size 0.4s, color 0.4s;
    --fa-rotate-angle: 0deg;
}
.iconbg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconbg i:hover {
    font-size: 4em;
    color: var(--accent-color-hover);
}

.pointDescription {
    width: 85%;
    text-align: center;
}
.name {
    display: inline; 
    color: white;
    font-family: "Ubuntu", sans-serif;
    font-size: 24px;
    font-weight: bold;
}
.logo_and_name {
    height: 100px;
    background-color: var(--accent-color);
    width: 400px;
    margin-bottom: 25px;
    border-radius: 25px;

}
.logoCont {
    width: 100%;
    display: flex;
    justify-content: center;
}
.nameContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo_and_name {
    display: grid;
    grid-template-rows: 100px auto;
    grid-template-columns: 100px;
}
.logoimg {
    grid-area: 1 / 1 / 2 / 2;
}
.nameContainer {
    grid-area: 1 / 2 / 2 / 3;
}
.logoimg img {
    border-radius: 25px;
}
.isocert table tr td img {
    width: 100%;
}
.isocert {
    display: flex;
    justify-content: center;
}
.isocert table {
    width: 80%;
}
.isocert table tr td {
    margin: 30px;
}
.home {
    border: none;
    background-color: transparent;
    font-family: 'Ubuntu', sans-serif;
}
.home * {
    margin: 10px;
}
.home {
    font-size: 18px;
    transition: color 0.4s;
}
.home:hover {
    color: gray;
}