*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none !important;
    list-style: none;
    color: white;
    cursor: pointer; /* Ensure the cursor changes to pointer */
}

#login1{
    color: gold;
}

#login1:hover{
    color: red;
}

body {
    font-family: "Oswald", serif; /* Apply font family to the entire document */
    font-optical-sizing: auto;
    font-weight: 400; /* Default weight */
    font-style: normal;
    background: linear-gradient(to right, #f8f9fa, #e3f2fd);
    overflow-x: hidden;
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full height */

}

h1, h2, h3, p {
    font-family: "Oswald", serif; /* Apply font family to headings and paragraphs */
}

/*nav*/

nav{
    display: flex;
    height: 620px;
    background-image: url(images/navbg1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; /* Ensure button is positioned relative to the navbar */
}

.nav-container {
    position: fixed; /* Make navbar sticky */
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    width: 100% !important;
    height: auto;
    z-index: 1000;
    padding: 10px 40px;
    height: 100px;
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for background and shadow */
}

.nav-container.scrolled {
    background: linear-gradient(to right, #000000, #4f4f4f, #b0b0b0); /* Background when scrolled */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow when scrolled */
    margin-bottom: 10px !;
}

nav ul{
    margin-top: 20px !important;
    display: flex;
    list-style: none;
    font-size: 23px;
    color: white; /* Yazı rengini beyaz yap */
}

li{
    padding: 0 1rem;
}

li:hover{
    cursor: pointer;
    color: #FFD700;
}


.dropdown{
    display: flex;
    justify-content: right;
    display: none;
    
    }
      .dropdown-menu {
        background-color: #212529 !important;
        color: white !important;
        height: fit-content !important;
      }

      
    
    
 
    



nav button {
    position: absolute;
    width: 300px;
    height: 80px;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 30px; /* Increase padding for larger button */
    font-size: 20px; /* Increase font size */
    background: linear-gradient(to right, #b0c4de, #d4e6f1, #aed6f1);
    color: #000000;
    border: none;
    border-radius: 10px; /* Increase border radius */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Add transform transition */
}

nav button:hover {
    background: linear-gradient(to right, #aed6f1, #d4e6f1,  #b0c4de);
    letter-spacing: 0.8px;
}

.language {
    display: flex;
    font-size: 15px;
    color: white; 
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1001; /* Ensure it stays above other elements */
}

.language a {
    cursor: pointer; /* Ensure the cursor changes to pointer */
}

.bayrak {
    margin-left: 5px;
    width: 24px;
    height: 15px;
    cursor: pointer; /* Ensure the cursor changes to pointer */
}

/*about*/

section{
    margin: 40px;
    padding: 100px 140px;
    flex-direction: column;
     background: linear-gradient(to right, #b0c4de, #d4e6f1, #aed6f1); 

    max-width: 100%; /* Ensure section does not exceed the page width */
    overflow: hidden; /* Hide overflow content */
}

h1{
    font-size: 2.5rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin-top: 10px;
}

.about-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5rem;
}

.about-text{
    width: 40%;
}

.logo{
    height: 100px;
    width: 400px;
    transition: transform 0.5s ease-in-out; /* Transition for smooth rotation */
}

.logo:hover {
    transform: rotate(360deg); /* Rotate 360 degrees on hover */
}


.explanation-container h3 {
    margin-top: 3rem; /* Add margin between heading and text */
}

/* history */

.history-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Add gap between rows */
    position: relative;
}

.history-container h3 {
    margin-top: 3rem; /* Add margin between heading and text */
}

.img-row {
    margin-top: 2rem;
    display: flex;
    justify-content: center; /* Center images */
    padding: 20px 30px !important;
    gap: 1rem
    ;
}

.img-row img {
    height: auto; 
    width: 45%; /* Ensure images have similar widths */
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.img-row-single {
    display: flex;
    justify-content: center; /* Center images */
}

.img-row-single img {
    height: auto; /* Make images responsive */
    width: 45%; /* Ensure images have similar widths */
    border-radius: 10px; /* Rounded corners for images */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for images */
}



.resimss{
    display: flex;
    justify-content: center; }

#person{
    width: 240px;
    height: 150px;
}

#zeka{
    position: relative;
    top: 55px;
    height: 320px;
    width: 320px;
  
}

#bilgi{
    height: 150px;
    width: 450px;
}

#bilgi2{
    width: 710px;
    height: 150px;
    margin-left: 30px;
}

/* activity */

.activity-container ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    display: flex;
    flex-direction: column; /* Display items in a column */
    color: black; /* Change text color to black */
}

.activity-container li {
    margin-bottom: 1rem; /* Add space between list items */
    position: relative; /* Position relative for custom list markers */
    padding-left: 2rem; /* Add padding to make space for list markers */
}

.activity-container li::before {
    content: counter(item, upper-roman) ". "; /* Add Roman numeral list markers */
    counter-increment: item; /* Increment the counter */
    position: absolute; /* Position the marker absolutely */
    left: 0; /* Align the marker to the left */
}

/* accordion */

.accordion-button, .accordion-body {
    font-family: "Oswald", serif; /* Apply font family to accordion */
}

.accordion{
    margin-top: 70px;
    font-size: 20px;
}

.accordion-button{
    font-size: 25px !important;
}

/*report*/

#analiz{
    width: 500px;
    height: 400px;
}

.first{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.second{
    display: flex; 
    justify-content: space-between;
    margin-top: 120px;
    flex-direction: column; 
}

.second .images {
    display: flex; 
    justify-content: space-between;
    margin-top: 20px; 
}

.second img{
    width: 48%; 
}

.third{
    margin-top: 120px;
}

.border{
    border: 3px solid black !important;
    padding: 20px;
    margin: 10px;
    height: 100px; /* Set equal height */
    width: 100%; /* Set equal width */
    background-color: #f0f0f0; /* Subtle background color */
}

.last{
    margin-top: 120px;
    display: block;
    text-align: center;
    align-items: center;
}

.last h4 {
    text-align: center; /* Center the heading */
}

.borderc{
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0;
    padding: 15px;
    width: 500px;
    margin: 0 auto; /* Center the border */
}

.map{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.map-info{
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: center; /* Center images horizontally */
    margin-top: 20px; /* Add space between map and text */
}

.map-info div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px; /* Add space between items */
    width: 100%; /* Ensure items take up full width */
}

.map-info img {
    margin-right: 10px; /* Add space between icon and text */
}

footer{
    background: linear-gradient(to right, #8c8c8c, #4f4f4f, #000000);
    color: white;
    text-align: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 3px !important;
    padding-top: 6px;
}

.modal-header {
    background-color: #f8f9fa;
}

.modal-title {
    font-family: "Oswald", serif;
}

.nav-tabs .nav-link.active {
    background-color: #d4e6f1;
    color: #000;
}

.nav-tabs .nav-link {
    color: #000;
}

.tab-content {
    margin-top: 20px;
}

.btn-primary {
    background-color: #4f4f4f;
    border-color: #4f4f4f;
}

.btn-primary:hover {
    background-color: #000;
    border-color: #000;
}


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

    .nav-container li{
    font-size: 18px;
    }
    
    #logo{
        width: 150px;
        height: 70px;
    }
    
    .language{
        margin-right: 40px;
        width: 14px;
        height: 7px;
    }
    
    h3{
        font-size: 17px !important;
    }
    
    .logo{
        height: 70px;
        width: 300px;
        margin-right: 10px;
    
    }
    
    
    #person{
        width: 180px;
        height: 100px;
    }
    
    #zeka{
        height: 220px;
        width: 220px;
      
    }
    
    #bilgi{
        height: 100px;
        width: 280px;
    }
    
    #bilgi2{
        width: 475px;
        height: 100px;
    }

    #analiz{
        width: 300px;
        height: 200px;
    }

    .borderc{
        padding: 5px;
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
    }

    .border{
        padding: 10px;
        margin: 5px;
        height: auto;
    }

    #Reporting h4{
        font-size: 17px;
    }
    
    #Reporting h5{
        font-size: 15px;
    }

    .first img{
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .first {
        display: flex;
        justify-content: center;
    }

    .second {
        display: flex;
        justify-content: center;
        flex-direction: column; /* Ensure images stack vertically */
        align-items: center; /* Center images horizontally */
    }

    

    

    .second img{
      display: flex;
        margin-left: 10px;
        margin-right: 10px;}


        #Contact p{
            font-size: 13px;
        }
    }


@media only screen and (max-width: 800px)  {
    h3{
        font-size: 10px !important;
    }

    .logo{
        height: 50px;
        width: 150px;
    
    }

    .about-text{
        width: 80%;
        margin-right: 10px !important; /* Add margin-top to separate text from the image */
    }

    .language{
        margin-right: 50px;
        top: -1px;
        width: 10px;
        height: 5px;
    }
    

    
section{
    margin: 10px;
    padding: 40px 20px !important;
}

#person{
    width: 70px;
    height: 40px;
}

#zeka{
    height: 100px;
    width: 100px;
  
}

#bilgi{
    height: 40px;
    width: 120px;
}

#bilgi2{
    width: 210px;
    height: 40px;
}

 #analiz{
        width: 150px;
        height: 120px;
    }

    .first {
        display: flex;
        justify-content: center;
        margin-top: 10px !important;
    }

    .second {
        display: flex;
        justify-content: center;
        flex-direction: column; /* Ensure images stack vertically */
        align-items: center; /* Center images horizontally */
        margin-top: 30px !important;
    }

    .third {
        margin-top: 30px ;
    }

    .last{
        margin-top: 30px;
    }

    .second img {
        width: 80%; /* Ensure images take up 80% of the container width */
        margin-bottom: 10px; /* Add margin between images */
    }

    .border{
        padding: 10px;
        height: auto;
    }

    #Reporting h4{
        font-size: 9px;
    }
    
    #Reporting h5{
        font-size: 8px;
    }


    #Contact p{
        font-size: 9px;
    }

    .map-info img{
        width: 35px;
        height: 35px;
    }

    .harita {
        width: 150px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto; /* Center the map */
    }

    .map-info {
        text-align: center; /* Center the map info text */
    }

    .map {
        display: flex;
        align-items: center;
    }

    .map-info {
        margin-top: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        align-items: flex-start; /* Align items to the start */
        padding-left: 10px; /* Add padding to align with the map */
    }

    .map-info div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        justify-content: flex-start; /* Align items to the start */
        width: 100%; /* Ensure full width */
    }

    .map-info p {
        margin: 0;
    }



    .dropdown{
        display: flex;
        margin-top: 20px;
        margin-right: -10px;
    }
    
    .dropdown-menu{
        height: 300px;
        font-size: 13px;
        margin-left: 30px;
    }


    .dropdown-menu .dropdown-item{
        font-size: 13px;
        color: white;
    }

    .firstnav{
        display: none;
    }

    .accordion-body{
        font-size: 15px !important;
    }




   
}