html {
    font-size: 18px;
    font-family: serif;
}

#AboutUsH1 {
    font-size: 48px !important;
    color: lightyellow !important;
    text-align: center;
    margin-left: 27%;
}

#AboutUsP, #AboutUsP1 {
    font-size: 1.4em !important;
    color: lightyellow !important;
    font-style: oblique !important;
    margin-bottom: 50px !important;
    margin-left: 27%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
        font-family: serif;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    margin-bottom: 60px;
    font-size: 18px;
    font-family: serif;
    overflow-x: hidden;
}
/*Yukarı butonu için başlangıç*/
#myBtn {
    position: fixed;
    bottom: 30px;
    right: 15px;
    z-index: 99;
    font-size: 32px;
    border: none;
    outline: none;
    background-color: maroon;
    color: white;
    cursor: pointer;
    height: 60px;
    border-radius: 30px;
    width: 60px;
    display: flex;
    text-align: center;
    vertical-align: middle;
}

    #myBtn:hover {
        background-color: brown;
    }
/*Yukarı butonu için bitiş*/
.navbar {
    z-index: 999;
    position: fixed;
    width: 100%;
    display: flex;
    justify-items: center;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.navbar-toggler {
    z-index: 1001
}

.nav-text-white {
    color: white;
}

@import url(https://fonts.bunny.net/css?family=amita:700);

.nav-text-black {
    color: black;
}

#navy {
    transition: background-color 1s ease, height 1s ease;
}

.nav-link:hover {
    background-color: transparent !important;
    color: #708090 !important
}

.navbar-nav {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

.navbar-collapse, header {
    display: flex;
    justify-content: center;
}

.nav-link {
    font-size: 22px;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-right: 20px;
}

a.dropdown-toggle:active, a.dropdown-toggle:focus, a:hover, button.dropdown-toggle:active, button.dropdown-toggle:focus {
    color: #708090
}

.dropdown-menu {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    /*background-color:transparent;*/
    border: none;
    width: max-content;
}

#menu, #menuHarita, #content {
    width: 45%;
    min-width: 325px;
    margin-right: 30px;
    margin-top: 2rem;
    margin-bottom: 30px;
}

#menuimage {
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    min-width: 325px;
    max-width: auto !important;
    height: 380px;
    min-height: 200px;
    margin-bottom: 30px;
}

#content, #ft, #menu, #menuHarita {
    display: inline-block;
    min-width: 325px
}

#content, #contentImage, #contentImage img, #ft, #menu, #menuHarita {
    min-width: 325px
}

#teklifindex {
    height: fit-content;
    width: 50%;
}

#animationP {
    color: whitesmoke;
    font-size: 62px;
    animation: 1s ease-out 0s 1 slideInFromRight;
}

.animated-background {
    top: 0 !important;
    width: 100% !important;
    height: 90vh; /* Belirtilen yükseklik */
    background-size: 100% 100% !important;
    background-position: bottom center !important;
    z-index: 0 !important;
    background-repeat: no-repeat !important; /* Tekrar etmeyi önle */
    display: flex !important;
    vertical-align: middle !important;
    align-items: center !important; /* Dikeyde ortalar */
    overflow: auto !important;
}

@media only screen and (max-width:1700px) {
    #IndexCalismaAlani {
        width: 80% !important;
        max-width: 100% !important
    }

    .image-containers {
        width: 350px !important;
        height: 250px !important;
    }
}

@media only screen and (max-width:1550px) {
    #IndexCalismaAlani {
        width: 90% !important;
        max-width: 100% !important
    }

    .image-containers {
        width: 350px !important;
        height: 250px !important
    }
}

@media only screen and (max-width:1440px) {
    .animated-background {
        background-position: center center !important;
        height: 60vh !important;
    }

    #bcgrdbos {
        height: 55vh !important
    }
}

@media only screen and (max-width:1400px) {
    #menuimage {
        height: 350px;
    }

    #AboutUsP, #AboutUsP1 {
        margin-left: 10%;
    }
}

@media only screen and (max-width:1390px) {
    .animated-background {
        background-position: center center !important;
        height: 60vh !important
    }

    #bcgrdbos {
        height: 55vh !important
    }

    .nav-link {
        font-size: 18px
    }
}

@media only screen and (max-width:1305px) {
    .animated-background {
        background-position: center center !important;
        height: 60vh !important
    }

    #bcgrdbos {
        height: 55vh !important
    }

    .navbar {
        width: 100%
    }
}


@media only screen and (max-width:1228px) {
    .animated-background {
        background-position: center center !important;
        height: 50vh !important
    }

    #bcgrdbos {
        height: 45vh !important
    }

    a, a:hover {
        border-bottom: none;
        padding-bottom: 0
    }

    #drpbckgrd {
        background-color: rgba(0,0,0,.2) !important;
        max-width: 170px
    }

    #drpnavbckgrd {
        min-width: 300px;
        margin: 0 auto;
        background-color: white !important
    }

    #IndexCalismaAlani {
        width: 100% !important;
        max-width: 100% !important
    }
}

@media only screen and (max-width:1199px) {

    #menuimage {
        max-height: 270px !important;
    }
}

@media only screen and (max-width:1180px) {

    #ft1 {
        flex-direction: column;
    }

    #index3 {
        font-size: 1.5em;
    }

    .carousel-caption h2 {
        font-size: 1.4em;
    }
}

@media only screen and (max-width:1000px) {
    .animated-background {
        background-position: center center !important;
        background-size: cover !important;
        height: 40vh !important
    }

    #bcgrdbos {
        height: 35vh !important
    }

    a, a:hover {
        border-bottom: none;
        padding-bottom: 0
    }

    #menu, #content {
        display: inline-block;
        margin-left: 5%;
        width: 75%
    }

    #calismaAlani {
        flex-direction: column
    }

    .bottom-left-text {
        bottom: 15px;
        left: 15px;
        font-size: 40px
    }

    #menuHarita {
        width: 90%;
        object-fit: contain;
    }

    #menuimage {
        max-height: 500px !important;
    }

    #teklifindex {
        width: 80% !important;
    }
}



@media (max-width:991px) {
    .dropdown-menu .dropdown-menu {
        margin-left: .7rem;
        margin-right: .7rem;
        margin-bottom: .5rem
    }

    .carousel-caption h2 {
        font-size: 1.3em;
    }
}

@media only screen and (max-width:910px) {
    .carousel-inner .carousel-item img {
        /* Resmin yüksekliğini artır */
        height: 600px; /* Yüksekliği istediğiniz değere ayarlayın */
        object-fit: cover; /* Resmin oranlarını koruyarak doldurmasını sağlar */
    }
}

@media only screen and (max-width:830px) {
    #animationP {
        font-size: 50px;
    }
}

@media only screen and (max-width:800px) {

    .animated-background {
        background-position: center center !important;
        height: 30vh !important
    }

    #bcgrdbos {
        height: 25vh !important
    }

    a, a:hover {
        border-bottom: none;
        padding-bottom: 0
    }

    .bottom-left-text {
        bottom: 10px;
        left: 10px;
        font-size: 32px
    }

    #CalismaAlaniText {
        font-size: 32px !important;
        min-width: 410px !important
    }

    #index3 {
        font-size: 1.2em;
    }
    #AboutUsH1{
        font-size: 40px !important
    }
}

@media (max-width:767px) {
    .navbar-collapse {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #menu, #content {
        margin-bottom: 0;
    }

    #menuimage {
        max-height: 270px !important;
    }

    h1 {
        font-size: 1.2em;
    }

    p {
        font-size: 0.9em;
    }

    #teklifindex {
        width: 90% !important;
    }

    .carousel-caption {
        width: 350px !important;
    }
}

@media (min-width:768px) {
    html {
        font-size: 16px
    }
}

.btn-link.nav-link:focus, .btn:active:focus, .btn:focus, .form-check-input:focus, .form-control:focus {
    box-shadow: 0 0 0 .1rem #fff,0 0 0 .25rem #258cfb
}

p {
    text-indent: 40px;
    text-align: justify
}

.caption, .nav-link, td, th {
    text-align: center
}

a {
    color: #d3d3d3;
    transition: border-bottom .3s,color .3s;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent
}

    a:hover {
        border-bottom: 2px solid #708090
    }

.dropdown-menu li:hover {
    background-color: #a9a9a9
}

.results tr[visible=true] {
    display: table-row
}

.counter {
    padding: 8px;
    color: #ccc
}

td, th {
    vertical-align: middle
}

.blink {
    animation: 1s linear infinite blinker;
    color: orange;
    font-weight: 700;
    font-family: sans-serif
}

#content, #ft, #menu, #menuHarita, .bottom-left-text, .caption, .navbar, .overlay {
    font-family: serif
}

@keyframes blinker {
    50% {
        opacity: 0
    }
}

@media all and (min-width:992px) {
    .dropdown-menu li {
        position: relative
    }

    .nav-item .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px
    }

    .nav-item .submenu-left {
        right: 100%;
        left: auto
    }

    .dropdown-menu > li:hover {
        background-color: #a9a9a9
    }

        .dropdown-menu > li:hover > .submenu {
            display: block
        }
}

@media only screen and (max-width:670px) {
    #animationP {
        font-size: 36px;
        margin-left: 1% !important;
    }
}

@media screen and (max-width: 640px) {
    /*.carousel-inner .carousel-item img {*/
    /* Resmin yüksekliğini artır */
    /*height: 500px;*/ /* Yüksekliği istediğiniz değere ayarlayın */
    /*objec*/ t-fit: cover; /* Resmin oranlarını koruyarak doldurmasını sağlar */
    #index3 {
        font-size: 1em;
    }

    #AboutUsP, #AboutUsP1 {
        
        margin-left: 7%;
    }
}

@media only screen and (max-width: 581px) {
    .carousel-caption {
        width: 300px !important;
    }

    #minsize {
        width: 100%;
    }

        #minsize h1 {
            font-size: 24px;
        }

    #AboutUsH1 {
        font-size: 36px !important;
    }
}



@media only screen and (max-width:510px) {

    #bcgrdbos {
        height: 20vh !important
    }

    a, a:hover {
        border-bottom: none;
        padding-bottom: 0
    }

    #menu, #content {
        font-size: 18px;
        margin-bottom: 0;
    }

    .bottom-left-text {
        bottom: 2px;
        left: 2px;
        font-size: 24px
    }

    #logoNav {
        width: 200px;
    }

    #teklifindex {
        width: 100% !important;
    }

    #animationP {
        font-size: 30px !important;
        margin-left: 0% !important;
    }
    #AboutUsP, #AboutUsP1 {
        margin-left: 2%;
    }

    #AboutUsH1 {
        font-size: 28px !important;
    }
}

@media only screen and (max-width:480px) {
    .carousel-caption {
        width: 250px;
    }

        .carousel-caption h2 {
            /* h2 etiketlerini h6 etiketlerinin stilleriyle değiştir */
            font-size: 1.1em; /* h6 etiketinin varsayılan font büyüklüğü */
            /* Diğer h6 stil özelliklerini buraya ekleyin */
        }

    #footertext {
        font-size: 15px;
    }

    #animationP {
        font-size: clamp(12px, 6vw, 28px) !important;
    }
}