@font-face {
    font-family: 'Gumela Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gumela Regular'), url('Gumela.woff') format('woff');
}

@font-face {
    font-family: 'Roboto Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Regular'), url('Roboto-Regular.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Italic'), url('Roboto-Italic.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Bold'), url('Roboto-Bold.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Bold Italic'), url('Roboto-BoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Thin'), url('Roboto-Thin.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Thin Italic'), url('Roboto-ThinItalic.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Light';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Light'), url('Roboto-Light.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Light Italic'), url('Roboto-LightItalic.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Medium'), url('Roboto-Medium.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Medium Italic'), url('Roboto-MediumItalic.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Black';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Black'), url('Roboto-Black.woff') format('woff');
}


@font-face {
    font-family: 'Roboto Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Black Italic'), url('Roboto-BlackItalic.woff') format('woff');
}

:root {
    --global-font-family: sans-serif;
    --global-color-green: rgba(3, 68, 48, 1);
    --global-color-beige: rgba(218, 213, 191, 1);
    --global-font-deco: Gumela;
}

* {
    scroll-behavior: smooth;
    margin: 0px;
    font-family: var(--global-font-family);
}

.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    background-color: var(--global-color-green);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    z-index: 1000;
    /* Z-index yükseltildi */
    transition: top 0.3s ease-in-out;
}

.dropdown-menu {
    background-color: var(--global-color-green) !important;
    /* Navbar ile aynı renk */
    border: none !important;
    /* Çerçeveyi kaldır */
    box-shadow: none !important;
    /* Varsayılan gölgeleri kaldır */
}

.dropdown-menu .dropdown-item {

    color: var(--global-color-beige);
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* Hover'da hafif açık renk */
    color: var(--global-color-beige) !important;
    /* Metin rengini koru */
}

.navbar-collapse {
    background-color: var(--global-color-green);
    /* Arka plan rengi eklendi */
    position: relative;
    /* Pozisyon ayarlandı */
    z-index: 999;
    /* Z-index belirlendi */
    width: 100%;
}

.navbar-nav .nav-link {
    color: var(--global-color-beige);
    font-size: larger;

    /* Menü bağlantı rengi */
}

.navbar-nav .nav-link:hover {
    color: #007bff;
    /* Hover rengi */
}


main {
    width: 100%;
    /* Tüm bölümlerin genişliği %100 olacak */


    overflow-x: hidden;
    background-position: 100% !;

    #intro {
        position: relative;
        height: 100vh;
        /* Tam ekran yüksekliği */
        background: url('../images/main-bg.jpg') no-repeat center center;
        /* Arka plan resmi */
        background-size: cover;
        /* Tam kapsama */

        #slogan {
            /* added font styling here, fixed contact part !!! */
            font-family: var(--global-font-deco);
        }

    }

    #logo-full {
        max-width: 100%;
        /* changed from 80 to 100 */
        /* Logo genişliği, cihazlara göre ölçeklenir */
        height: auto;
        margin-top: 10%;
        /* added */

        @media (max-width: 768px) {
            margin-top: 70%;
        }
    }

    p {
        color: var(--global-color-beige);
        /* Özel değişken rengi */
        /* font-family: var(--global-font-deco); fixed the font incompatibility in contact screen !!!*/
        /* Özel font */
        font-size: 1.5rem;
        /* Responsive metin boyutu */
        letter-spacing: 6px;
    }

    .scroll-down {
        background: transparent;
        border: none;
        animation: bounce 2s infinite;
        /* Bounce animasyonu */
        background: none !important;
        box-shadow: none !important;
    }

    @keyframes bounce {

        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateY(0);
        }

        40% {
            transform: translateY(-15px);
        }

        60% {
            transform: translateY(-7px);
        }
    }


    #menu {

        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        background-color: var(--global-color-beige);
        position: relative;

        .mt-5 {
            margin-top: 1rem !important;
            /* added */
        }

        p {
            margin-top: 20px;
            font-family: sans-serif;
            color: var(--global-color-green);
        }

        .body {
            font-size: 20px;
            margin-top: 10px;
            margin-bottom: 30px;
            /* changed */

            @media (max-width: 768px) {
                letter-spacing: 3px;
            }
        }

        h5 {
            font-size: 50px;
        }

        .header {
            font-size: 50px;
            font-weight: 600;
            margin-bottom: 0;
            margin-top: 0;
            /* added */


        }

        img {
            height: 300px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            object-fit: cover;
        }

        .p-5 {
            /* changed the padding settings to make this page smaller? */
            padding-top: 2rem !important;
            padding-bottom: 1rem !important;
        }

        .card {
            background-color: transparent;
            border-radius: 10px;
            border: 1px solid var(--global-color-green);
            transition: box-shadow 0.3s ease-out;

            /*width: 80%;*/
            .card-body {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

        .card:hover {
            box-shadow: 0 0 11px rgba(33, 33, 33, 0.5);
        }

        button {
            /* margin-top: 20px; */
            background-color: var(--global-color-green);
            border: none;
            border-radius: 10px;
            height: 70px;
            width: 180px;

            a {
                font-size: 30px;
                text-decoration: none;
                color: var(--global-color-beige);
            }
        }
    }

    #about {
        background-color: var(--global-color-green);
        display: flex;
        align-items: center;
        flex-direction: column;

        p {
            font-family: sans-serif;
            color: var(--global-color-beige);
        }

        .header {
            margin-top: 0;
            font-size: 50px;
            font-weight: 700;
        }

        .body {
            font-size: 24px;
        }

        img {
            object-fit: cover;

            border-radius: 20px;
        }

        div.col-sm.mt-2 {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            text-align: right;

            img {
                height: 50%;
            }
        }

        div.col-sm.mt-2 { 
            img {
                height: 60%;
            }
        }

        .gallery-nav {
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-bottom: 10px;

            mt-5  { 
                margin-top: 0 !important;
            }

            button {
                background: transparent;
                border: none;
                cursor: pointer;
            }

            button:focus {
                outline: none;
                box-shadow: none;
            }
        }
    }

    #gallery {
        /* background-image: url('assets/images/logo-bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; */
        height: 100vh;
        width: 100%;
        margin-top: 0vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        overflow: hidden;


        #bg {
            position: absolute;
            max-width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* p {
            z-index: 2;
            font-family: var(--global-font-family);
            color: var(--global-color-green);
            font-size: 50px;
            font-weight: 500;
            margin-top: 40px;
        } */

        .carousel-inner {

            .carousel-item {
                background: no-repeat center center scroll;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                object-fit: cover !important;
                background-position: 50% 50%;
            }

            img {
                height: 800px !important;

                @media (max-width: 768px) {
                    width: 100%;
                    height: 800px;
                    object-fit: cover;
                    /* changed from contain to conver */
                }
            }
        }

    }

    #contact {
        background-color: var(--global-color-green);
        display: flex;
        align-items: center;
        flex-direction: column;
        
        @media screen and (min-width: 1024px) and (max-width: 1920px) {
            height: 95vh;
        }

        p {
            color: var(--global-color-beige);
        }

        .header {

            font-size: 50px;
            margin-bottom: 0px;
        }

        .body {
            font-size: 18px;

            font-weight: 150;

            @media (max-width: 768px) {
                font-size: 20px;
                letter-spacing: normal;
            }
        }


        #map-container {
            /* added */
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .contact-info-container {
            text-align: left;
            /* added */

            @media (max-width: 768px) {
                padding-left: 10px;
                padding-top: 10px;
            }

            .container {
                /* changed display settings */
                display: inline-flex;
                padding: 0;
            }


            i {
                /* chnaged margin */
                margin-top: 10px;
                margin-right: 10px;
                color: var(--global-color-beige);

                @media (max-width: 768px) {
                    margin-top: 5px;
                }
            }

            p {
                font-size: x-large;

                @media (max-width: 768px) {
                    font-size: 15px;
                    letter-spacing: 3px;
                }

            }


            .form {
                p {
                    margin-bottom: 3px;
                }

                input {
                    width: 90%;
                    margin-bottom: 3px;
                }

                input,
                textarea {
                    border-radius: 5px;
                    border: none;

                    &:focus {
                        outline: var(--global-color-beige) solid 1px;
                        box-shadow: 1px 1px 10px var(--global-color-beige);
                    }
                }
            }

            button {
                background-color: var(--global-color-beige);
                border: none;
                color: var(--global-color-green);
                border-radius: 5px;
                font-size: 15px;
                font-weight: 500;
                padding: 5px 70px;
                cursor: pointer;
                align-self: center;
                margin-top: 15px;

                &:focus {
                    outline: none;
                    box-shadow: none;
                    cursor: pointer;
                }
            }
        }

    }

}

.footer {
    border-top: 1px solid rgb(218 213 191 / 70%);


    background-color: var(--global-color-green);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: var(--global-color-beige);
}