*{
    margin: 0 0;
    padding: 0 0 ;
}

body{
    background: url('../Backgrounds/3274764.jpg');
    background-size: 135%;
    background-repeat: no-repeat;
    transition: .2s;
}

::-webkit-scrollbar{
    width: 9px;
}

::-webkit-scrollbar-track{
    border-radius: 5px;
    box-shadow: 0 0 5px 0 black inset;
}

::-webkit-scrollbar-thumb {
    background: gray; 
    border-radius: 5px;
  }

.Navbar{
    height: 8.5vh;
    width: 100%;
    background: linear-gradient(to right, rgba(0, 85, 255, 0.9), rgba(0, 149, 255, 0.95));
    box-shadow: 0 0 5px 0 black;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.Navbar .CemaLogo{
    height: 90%;
    user-select: none;
    cursor: pointer;
    position: absolute;
    top: 5%;
    left: 2%;
}

.Navbar .NavbarCont{
    width: 60%;
    height: 80%;
    background-color: transparent;
    position: absolute;
    right: 18%;
    top: 10%;

    align-items: center;
    justify-content: center;
    display: flex;
}

.Navbar .NavbarCont li{
    width: 16%;
    height: 90%;
    border-radius: 1rem;
    list-style-type: none;
    float: left;
    margin-left: 5%;
    background-color: transparent;
    text-decoration: underline;
    align-items: center;
    justify-content: center;
    display: flex;
}

.Navbar .NavbarCont li a{
    text-decoration: none;
    font-size: 3vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: whitesmoke;
    transition: .2s;
}

.Navbar .NavbarCont li a:hover{
    color: rgb(170, 170, 170);
}


.Header{
    width: 100%;
    height: auto;
    background-color: transparent;

    position: absolute;
    top: 8.5vh;
    left: 0;
}

.Header .EngineersPhoto{
    width: 100%;
    height: 70vh;

    background: url('../Pictures/pexels-pixabay-416405.jpg');
    background-size: cover;
    background-position: 0%;
}

.Header .EngineersPhoto p{
    width: 100%;
    text-align: center;
    font-size: 7vh;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 15px black;
    background-color: rgba(1, 1, 1, .7);
    font-family: "Madimi One", sans-serif;
    font-weight: 600;
    letter-spacing: 1vh;

    position: absolute;
    left: 0;
    top: 18%;
}

.Header .ParagraphBox{
    height: 100vh;
    width: 100%;
    background-color: transparent;
}

.Header .ParagraphBox p{
    width: 80%;
    background-color: transparent;
    font-size: 4vh;
    color: black;
    text-shadow: 0 0 2px black;
    font-family: "Blinker", sans-serif;
    font-weight: 600;

    position: relative;
    left: 10%;
    top: 46%;
}

.Header .ParagraphBox .MainShowPhoto{
    height: 33%;
    position: relative;
    animation: MainImageAnim 1s infinite;
}

.Header .ParagraphBox .MainShowPhoto1{
    left: 5%;
    top: 55%;
}

.Header .ParagraphBox .MainShowPhoto2{
    left: 63%;
    top: 47%;
}

.Header .ParagraphBox .MainShowPhoto3{
    left: -20%;
    top: -2%;
}

.Header .ParagraphBox .MainShowPhoto4{
    left: 25%;
    top: 2%;
}

@keyframes MainImageAnim {
    0%{
        transform: translate(0%, 0%);
    }

    50%{
        transform: translate(0%, var(--i));
    }

    100%{
        transform: translate(0%, 0%);
    }
}





.InfosBox{
    width: 90%;
    position: relative;
    top: 10vh;
    left: 2vw;
    list-style-type: none;
}

.InfosBox li a{
    text-decoration: none;
}

.InfosBox li{
    margin-bottom: 3%;
}

.InfosBox li a .AddressIcon{
    height: 10vh;
    position: relative;
    top: 4vh;
}

.InfosBox li a .InfoLogos{
    font-size: 10vh;
    color: black;
    position: relative;
    top: 2vh;
}

.InfosBox li a .InfoTexts{
    font-size: 5vh;
    position: relative;
    left: 2vh;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: black;
    text-shadow: 0 0 3px black;
    
}

.InfoMap{
    border-radius: 1rem;
    width: 50vw;
    height: 60vh;
    box-shadow: 0 0 5px 0 black;
    position: absolute;
    right: 6%;
    top: 37%;
}







.KurumsalText{
    width: 80%;
    color: black;
    font-size: 5vh;
    text-shadow: 0 0 2px black;
    font-family: "Blinker", sans-serif;
    font-weight: 550;
    text-align: center;

    position: relative;
    left: 10%;
    top: 30vh;
}


.KurumsalPhoto{
    width: 15%;
    position: relative;

    animation: KurAnim 3s infinite;
}

.KurumsalPhoto1{
    bottom: 33vh;
    left: 3vh;
}

.KurumsalPhoto2{
    top: 28vh;
    right: 20vh;
}

.KurumsalPhoto3{
    bottom: 28vh;
    left: 70vh;
}

.KurumsalPhoto4{
    top: 31vh;
    left: 50vh;
}

@keyframes KurAnim {
    0%{
        transform: scale(100%);
    }

    50%{
        transform: scale(95%);
    }

    100%{
        transform: scale(100%);
    }
}





.FaaliyetTitle{
    width: 100%;
    font-size: 6vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 800;
    text-shadow: 0 0 3px black;

    text-align: center;
    position: relative;
    left: 0;
    top: 23vh;
}

.FaaliyetCont{
    width: 30%;
    background-color: transparent;

    align-items: center;
    list-style: disc;

    position: relative;
    top: 27vh;
    left: 42vw;
}

.FaaliyetCont li{
    font-size: 4vh;
    font-family: "Blinker", sans-serif;
    font-weight: 600;
    text-shadow: 0 0 2px black;
    margin-bottom: 5%;
}






#DownArrow{
    width: 5vh;
    height: 4.5vh;
    background-color: rgb(0, 128, 255);
    border-radius: 3px;
    border: .35rem solid white;
    box-shadow: 0 0 5px 0 black;
    padding-bottom: .4rem;

    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 4vh;
    color: whitesmoke;

    transform: rotate(90deg);

    position: absolute;
    left: 50%; right: 50%;
    top: 39.5%;
    cursor: pointer;

    transform: translate(-50%, -50%), rotate(90deg);
}