@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
    /* font-family: Arial, sans-serif; */
    margin: 0;
    padding: 0; height: 100%; width: 100%;
    box-sizing: border-box;
}
header, section, footer {
    padding: 80px 0;
    text-align: center;
}
.header{
    background-image: url('../public/images/PHOTO-2024-06-21-12-10-49.jpg'); /* Specify the path to your background image */
    background-size: cover;
    height: 55vh;
    position: relative;
    background-position: center;
}

.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent black overlay */
    z-index: 1; /* Ensures the overlay is above the background */
}
.content {
    position: relative;
    z-index: 2; /* Ensures the content is above the overlay */
    color: white; /* Text color for better readability */
    padding: 20px; /* Optional padding */
}
.header> .content >h1{ font-size: 4em;}

.main-nav{display: none}
.open-main-nav{display: none;}

.headerTeam{
    background-size: cover;
    height: 5vh;
    background-position: center;
}
nav{right: 2%;top: 5%; position: fixed;}
nav a:hover, nav a.active {
    background-color: rgb(155, 155, 155);
}
.logoPart{height: 7%; top: 4%; position: absolute; left: 3%}
.logoPart> img{height: 100%;}
.content> .logoPart{height: 17%; left: 3%; top: -3em; position: absolute;}


.DefinitionsDivs{text-align: left; min-height: 25em; box-sizing: border-box; width: 55%; margin-top: 0%; display: inline-block; vertical-align: top; padding: 0%;}
.FlexingDivs{text-align: left; min-height: 15em; box-sizing: border-box; width: 46%; margin-top: 0%; display: inline-block; vertical-align: top; padding: 0%;}
.FlexingDivs> h3{font-weight:lighter; font-size:3.5em; margin-left: 0%; text-align: start; margin-top: 1%;}
.FlexingDivs> button{margin-left: 2%; outline: none; width: 7em; background: rgb(35, 85, 168); border: none; color: white; font-size: 110%; height: 3em;}
.aboutParra{ display: block; line-height: 1.6; margin-top: 1%;  font-size: 110%; font-family: 'Montserrat', sans-serif; margin-left: 2%; padding-left: 0%; font-size: medium; text-align: left; }

.FlexingDivs> img {height: 100%; width: 90%; object-fit: cover;}

.FlexingDivs> form{width: 100%;}
.FlexingDivs> form> input{width: 98%; margin-bottom: 2%; height: 4em; outline: none; }
.FlexingDivs> form> textarea{width: 98%; margin-bottom: 2%; height: 10em; outline: none; }
.FlexingDivs> form> button{width: 20%; margin-bottom: 2%; height: 4em; outline: none; margin-left: 1%; float: left; }
.ContactHead{display: block; margin: auto; margin-bottom: 0%;  margin-left: 2%; position: relative; text-align: left;}
.ContactParra{ display: block; margin-top: 0%; margin-left: 2%; padding-left: 0%; font-size: medium; text-align: left;}
address{text-align: left; margin-left: 2%;} 
footer {
    background-color: #333;
    color: #fff;
}
section {
    background-color: #f9f9f9;
    padding-top: 0%;
}
h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #fff;
}
nav a {
    text-decoration: none;
    color: #333;
    color: #fff;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
nav a:hover {
    background-color: #333; color: #fff;
}
.teamPic{height: 70vh; width: 70%;}


.gallery {
    display: flex; flex-wrap: wrap; gap: 10px; width: 95%; margin-top: 2%; margin-left: 2.5%; margin-bottom: 2%;
}
.gallery-item {
    position: relative; border-radius: 2px; overflow: hidden; height: 15em; width: 23%; margin-left: 1%; border: 1px solid rgb(35, 85, 168);
}

.slider {
    width: 100%; height: 100%; display: flex; transition: transform 0.5s ease-in-out;
}
.slider img {
    width: 100%; display: block;
}

/* .slider {
    display: flex; transition: transform 0.5s ease-in-out;
}

.slider img {
    width: 100%; display: block;
} */
.caption {
    position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; height: 10%; padding: 5px; background: rgba(0, 0, 0, 0.5); color: white; opacity: 1; transition: opacity 0.3s ease;
}
/* .gallery-item:hover .caption {
    opacity: 1; 
} */

.nav {
    position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%);
}
.nav button {
    background: transparent; border: none; z-index: 9; color: rgb(35, 85, 168); padding: 10px; cursor: pointer;
}

/* Modal Styles */
.modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center;
}
.modal-content {
    position: relative; width: 50%; margin-left: 25%; height: 50%; margin-top: 5%; overflow: hidden;
}
.modal-slider {
    display: flex; height: 100%; width: 100%; transition: transform 0.5s ease-in-out;
}
.modal-slider img {
    width: 100%; height: 100%; display: block; object-fit: cover
}
.modal-nav {
    position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%);
}
.modal-nav button {
    background: rgba(0, 0, 0, 0.5); border: none; color: white; padding: 10px; cursor: pointer;
}
.popDescription{width: 50%; color: white; margin-top: -2%; margin-left: 25%; line-height: 1.6; text-align: left;}
.close {
    position: absolute; top: 10px; right: 10px; font-size: 150%; background: rgba(0, 0, 0, 0.5); border: none; color: white; padding: 10px; cursor: pointer;
}

.main-nav {display: none;position: fixed;top: 0;right: 0;left: 0;bottom: 0;text-align: center;background: rgba(0,0,0,0.3);opacity: 0;z-index: 80;visibility: hidden;transition: all .375s;}
.main-nav.is-open {opacity: 1;z-index: 100;visibility: visible; height: 100%; background: white;}
/* Yellow band effect */
.main-nav::before {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 10%;background: rgb(0, 0, 0);transform-origin: 0 0;transform: skew(-14deg) translateX(-120%);transition: all .275s .1s;}
.main-nav.is-open::before {transform: skew(0deg) translateX(0); background: white;}

/* Skewing effect on menu links */
.main-nav ul {display: inline-flex;flex-direction: column; margin-top: 50%; /* Should be 100%, but we have a notice message :D */align-items: flex-start;justify-content: center;transform: skew(0deg);}
.main-nav li {display: block;margin: .5rem 0;text-align: right;transform: skew(0deg); }

/* Apparition effect on links */
.main-nav a {opacity: 0;transform: translateY(-10px)}
.main-nav.is-Close a {opacity: 0;transform: translateY(-10px);}
.main-nav.is-open a {opacity: 1;transform: translateY(0);}
.main-nav li:nth-child(1) a {transition: all 275ms 175ms}
.main-nav li:nth-child(2) a {transition: all 275ms 225ms}
.main-nav li:nth-child(3) a {transition: all 275ms 275ms}
.main-nav li:nth-child(4) a {transition: all 275ms 325ms}
.main-nav li:nth-child(5) a {transition: all 275ms 375ms}
/*.belowParallaxss{top: 40vh; }*/
/* Decoration */
.main-nav ul,
.main-nav li {list-style: none;padding: 0;}
.main-nav a {display: block;padding: 12px 0; color: black;font-size: 1.4em;text-decoration: none;font-weight: bold;}
.main-nav >ul> li> a:hover{color: var(--main-theme)}
.main-nav >ul> li> .active{color: var(--main-theme)}
/* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {display: none; position: absolute;top: 1px;padding-top: 20px;right: 15px;z-index: 20;background: transparent;border: 0;cursor: pointer;}
.open-main-nav:focus {outline: none;}

.burger {position: relative;display: none;width: 28px;height: 4px;margin: 0 auto;background: white;transform: skew(5deg);transition: all .275s;}
.burger:after,
.burger:before {content: '';display: none;height: 100%;background: white;transition: all .275s;}
.burger:after {transform: translateY(-12px) translateX(-2px) skew(-20deg);}
.burger:before {transform: translateY(-16px) skew(-10deg);}
/* Toggle State part */
.is-open .burger {transform: skew(5deg) translateY(-8px) rotate(-45deg);}
.is-open .burger:before {transform: translateY(0px) skew(-10deg) rotate(75deg);}
.is-open .burger:after {transform: translateY(-12px) translateX(10px) skew(-20deg);opacity: 0;}
/* MENU Text part */
.burger-text {display: none;font-size: .675rem;letter-spacing: .05em;margin-top: .5em;text-transform: uppercase;font-weight: 500;text-align: center;color: white;}


@media only screen and (max-width: 600px) {
    .header{
        height: 100%;
        padding-top: 20px;
    } 
    .headerTeam{
        height: 100%;
        padding-top: 20px;
    }

    .main-nav {display: block;}
    .open-main-nav {display: block}
    .burger {display: block;}
    .burger:after,
    .burger:before {display: block;}
    .burger-text {display: block;}

    .header> .content> h1{ font-size: 3em;}   
    .headerTeam> h1{ margin-top: 30%;}
    .headerTeam > button{ top: 3%;}
    .logoPart{height: 4%}
    .content> .logoPart{height: 12%; left: 2%; top: 1em;}
    nav{right: 7%;top: 13%; display: none;}
    nav > a{display: inline-block; margin-bottom: 2%;}
    .FlexingDivs{min-height: 25em; box-sizing: border-box; min-height: 10em;  width: 95%;display: inline-block;}
    .FlexingDivs> img {width: 100%;}
    .FlexingDivs> h3{font-size:2.2em;}
    .teamPic{margin-left: 0%; width: 100%;}
    .DefinitionsDivs{ width: 95%; margin-top: 0%; }

    .gallery {width: 98%; margin-left: 1%;}
    .gallery-item {height: 15em; width: 100%; }

    .popDescription{width: 98%; margin-left: 1%; }
    .modal-content {width: 96%; margin-left: 2%; height: 40%; margin-top: 15%;}

}