/*****müşterilerimiz link******/
#clients {
    cursor: default; /* Sets the cursor to the default arrow */
}
/******CLIENTS CARDS CONTAINER ***/

.clients{
    padding-bottom:5%;
}
/*****CLIENTS DETAILED ITEMS*******/
.clientItemDetail{
    padding-top:15px;
}

.clientItem{
    display:none;
    width:100%;
    height:auto;
    color:white;
    flex-direction:column;
    padding:2%;
}
.clientItemFirstRow{
    display:flex;
    width:100%;
    flex-direction:row;
    height:250px;
}
.clientItemLogoContainer{
    
    padding-left:1%;
    padding-top:1%;
    align-items:center;
    justify-content:center;
    width:40%;
}
.clientItemDescContainer{
    
    display:flex;
    font-size:35px;
    font-weight:200;
    justify-content:center;
    align-items:center;
    padding-left:12%;
    padding-right:10%;
}
.clientItemSecondRow{
    display:flex;
    width:100%;
    flex-direction:row;
    font-size:35px;
}
.clientItemSecondRowColumns{
    display:flex;
    width:33%;
    flex-direction:column;
    justify-content:left;
    align-items:center;
    text-align:left;
    height:auto;
    flex: 1; /* Allow columns to take up equal space */
    justify-content: flex-start; /* Align items to the left */
    text-align: left; /* Align text within the element to the left */
    padding-left:1%;
}

.clientItemIconLegend{
    display:flex;
    flex-direction:row;
    justify-content:start;
    text-align:left;
    align-items:center;
    width:100%;
}
.icon{
    width:40%;
}

.legendText{
    width:100%;
    position:relative;
    text-align:left;
    margin-left:-17%;
}
/*****CLIENTS CARDS***********/


.clientsRow{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 0;
    width:100%;
}

.clientContainer{
    width:100%;
    display:flex;
    background:#333;
    height:450px;
}

.clientsCards {
    display:flex;
    flex-direction:column;
    width:100%;
    /*flex: 1 1 25%; /* Flex-grow, flex-shrink, flex-basis */
    box-sizing: border-box;
    padding:3%;
    font-size:25px;
    color:white;
    font-weight:200;
    line-height:40px;
    border: .1px solid #444;
    cursor:pointer;
}
.logos{
    display:flex;
}

.clientsLogo {
    display: flex;
    justify-content: left; /* Logoyu yatayda ortala */
    align-items: center; /* Logoyu dikeyde ortala */
    height: 150px; /* Sabit bir yükseklik belirle */
    margin-bottom: 20px; /* Description ile logo arasında boşluk bırak */
    overflow: hidden; /* Logo boyutları bu alanı aşarsa taşan kısmı gizle */
}

.clientsLogo img {
    max-width: 50%; /* Logonun genişliği konteynerin genişliğini aşmasın */
    max-height: 50%; /* Logonun yüksekliği belirlenen sabit yüksekliği aşmasın */
    display: block; /* Altında oluşabilecek ekstra boşluğu kaldır */
    object-fit: contain; /* Logonun düzgün şekilde ölçeklenmesini sağla */
}

.clientsDesc {
    flex-grow: 1; /* Description kısmını büyütüp alanı doldurmasına izin ver */
    padding-top: 0; /* Yukarıdaki sabit yükseklik nedeniyle artık gerek yok */
}

/* Hover effects for each client */
#client1:hover {
    background: #3399ff;
}

#client2:hover {
    background: #e9004c;
}

#client3:hover {
    background: #fd6868;
}

#client4:hover {
    background: #e9004c;
}

#client5:hover {
    background: #33cc99;
}

#client6:hover {
    background: #999999;
}

#client7:hover {
    background: #33cc99;
}

#client8:hover {
    background: #3399ff;
}

#client9:hover {
    background: #9933ff;
}

#client10:hover {
    background: #4036ee;
}


.clientDetailButton{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-top:auto;
    padding:0 2% 2% 0;
}

.ok{
    width:55px;
    cursor:pointer;
}

@media screen and (max-width:1200px) and (min-width:1000px){
    .clientsRow{
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 0;
    width:100%;
}
}

@media screen and (max-width:1000px) and (min-width:700px){
.clientItemFirstRow{
    display:flex;
    width:100%;
    flex-direction:column;
    height:300px;
}
.clientItemLogoContainer{
    
    padding-left:1%;
    padding-top:1%;
    align-items:center;
    justify-content:left;
    width:40%;
}
.clientsDesc{
    padding-top:5%;
}
.clientItemLogoContainer{
    
    padding-left:1%;
    padding-top:1%;
    align-items:center;
    justify-content:center;
    width:20%;
}
    
    .clientItemSecondRow{
    display:flex;
    width:100%;
    flex-direction:column;
    font-size:35px;
}
.legendText{
    padding-left:5%;
}
    
.clientItemDescContainer{
    
    display:flex;
    font-size:20px;
    font-weight:200;
    justify-content:left;
    align-items:center;
    padding-left:2%;
    padding-top:2%;
}
.clientItemSecondRowColumns{
    display:flex;
    width:100%;
    flex-direction:column;
    justify-content:left;
    align-items:center;
    text-align:left;
    height:auto;
    flex: 1; /* Allow columns to take up equal space */
    justify-content: flex-start; /* Align items to the left */
    text-align: left; /* Align text within the element to the left */
    padding-left:1%;
}
    .clientsRow{
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 0;
    width:100%;
}
}
@media screen and (max-width:700px) and (min-width:300px){
.clientItemFirstRow{
    display:flex;
    width:100%;
    flex-direction:column;
    height:300px;
}
.clientItemLogoContainer{
    padding-left:1%;
    padding-top:1%;
    align-items:center;
    justify-content:left;
    width:40%;
}
.clientsDesc{
    padding-top:5%;
}
.clientItemLogoContainer{
    
    padding-left:1%;
    padding-top:1%;
    align-items:center;
    justify-content:center;
    width:20%;
}
    
    .clientItemSecondRow{
    display:flex;
    width:100%;
    flex-direction:column;
    font-size:35px;
}
.clientItemDescContainer{
    
    display:flex;
    font-size:20px;
    font-weight:200;
    justify-content:left;
    align-items:center;
    padding-left:2%;
    padding-top:2%;
}
.clientItemSecondRowColumns{
    display:flex;
    width:100%;
    flex-direction:column;
    justify-content:left;
    align-items:center;
    text-align:left;
    height:auto;
    flex: 1; /* Allow columns to take up equal space */
    justify-content: flex-start; /* Align items to the left */
    text-align: left; /* Align text within the element to the left */
    padding-left:1%;
}
    .clientsRow{
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    gap: 0;
    width:100%;
}
}