h1{
    padding-left:3%;
   
}

h3{
    font-weight:200;
    font-size:18px;
    line-height:25px;
}

.linkContainer:hover{
    font-weight:500;
}

.mainContainerC {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #999999;
    width: 100%;  /* Bu #mainContainer'ın genişliğini %100 yapar */
}


.form{
     width:80%;
    display:flex;
    justify-content:space-between;
    flex-direction:row;
}

.dropdownButtonContainer {
    padding: 3% 0% 3% 0%;
    display: flex;
    justify-content: space-between;
    align-items:center;
    width: 100%;  /* Bu %100, ebeveynin genişliğini alacak şekilde çalışır */

}

.filterContainer{
    display:flex;
    width:30%;
}

.dropdownSelect {
    width: 40%;
    padding: 10px;
    padding-left:15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 25px;
    background-color: #fff;
    background-image: url("{% static 'images/central-arrow-icon.png' %}");
    background-repeat: no-repeat;
    cursor: pointer;
    color: gray;
    height: 40px;
    appearance: none; /* Varsayılan ok ikonunu kaldır */
    -webkit-appearance: none; /* Safari için */
    -moz-appearance: none; /* Firefox için */
        z-index: 1; /* Select'i üst katmana al */

}

.custom-arrow {
    position: relative;
    right: 30px;
    
    transform: translateY(30%);
    pointer-events: none; /* Tıklamaların select'e ulaşmasını sağlar */
    color: gray;
    font-size: 16px;
    z-index: 2 !important; /* Özel ok ikonunu üst katmana al */
}

/* Optional: Add hover or focus styles */
.dropdownSelect:focus {
    border-color: magenta; /* Change border color on focus */
    outline: none;
}

.inputAndButtonsContainer {
    display: flex;
    gap: 10px;
    flex-direction: row;
    margin-left: auto; 
    padding: 10px;
    justify-content: flex-end;
    width: 70%; 
}
.input {
       
        width:600px !important;
        padding: 10px; /* İçerik dolgusunu artırmak için */
        font-size: 16px; /* Yazı boyutunu artırmak için */
        border: 1px solid #ccc; /* Kenarlık eklemek için */
        border-radius: 25px; /* Kenarları yuvarlatmak için */
    }

.input:focus{
    border-color:magenta;
    outline: none;
}

.butonlar{
    background:rgb(255, 255, 255);
    border-radius:25px;
    color:grey;
    border:none;
    padding:3px 24px 3px 24px;
    cursor: pointer;
}

#cardsContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 80%;
    margin: 20px 0;
}


.card {
    border: none;
    border-radius: 38px;
    border-color:none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden; 
    height: 420px; /* Fixed height for the card */
    padding:2%;
}

.card[data-type="model"] {
    background-color: #9933ff !important; 
}

.card[data-type="makale"] {
    background-color: #3399ff !important; 
}

.card[data-type="article"] {
    background-color: #3399ff !important; 
}

.card[data-type="proje"] {
    background-color: #fd6868 !important; 
}

.card[data-type="project"] {
    background-color: #fd6868 !important; 
}

.card[data-type="eğitim"] {
    background-color: #33cc99 !important; 
}

.card[data-type="training"] {
    background-color: #33cc99 !important; 
}

.card[data-type="hizmet"] {
    background-color: #339999 !important; 
}

.card[data-type="service"] {
    background-color: #339999 !important; 
}

.card[data-type="araştırma"] {
    background-color: #4036ee !important; 
}

.card[data-type="research"] {
    background-color: #4036ee !important; 
}


.card[data-type="webinar"] {
    background-color: #ff3366 !important; 
}




.type{
    color:white;
    font-weight:100;
    font-size:14px;
}

.card .content {
    flex-grow: 1; /* Allow content to grow and push the image down */
    padding: 10px;
}


.descText{
  font-size:17px !important;
    line-height:25px !important;
    margin-top:-20px !important;
}

.descContainer{
    margin-top:-12px;
    width:100%;
    padding: 0 10px 0 10px;

}

.descContainer p{
    font-size:15px!important;
    line-height:22px;
}



.typeContainer{
    width:100%;
    padding: 0 10px 0px 10px;
    margin-top:-5px;
}


.image-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 280px; /* Height for the image */
    overflow: hidden; /* Ensure it doesn't exceed the container */
    background:#333;
    
}

.article_small_pic {
   width: 100%;
   height: 100%;
    object-fit: cover; /* Oranı koruyarak tüm alanı kapsar */
    position: relative;
}

.read-more-button {
    display: flex;
    flex-direction: row;
    align-items: center; /* Aligns line and arrow vertically */
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0; /* Remove additional padding */
    right: 10px;
}

.read-more-button[data-type="model"] {
    background-color: #9933ff; 
}

.read-more-button[data-type="eğitim"] {
    background-color: #33cc99; 
}

.read-more-button[data-type="training"] {
    background-color: #33cc99; 
}


.read-more-button[data-type="makale"] {
    background-color: #3399ff; 
}

.read-more-button[data-type="article"] {
    background-color: #3399ff; 
}


.read-more-button[data-type="proje"] {
    background-color: #fd6868; 
}

.read-more-button[data-type="project"] {
    background-color: #fd6868; 
}

.read-more-button[data-type="hizmet"] {
    background-color: #339999; 
}

.read-more-button[data-type="service"] {
    background-color: #339999; 
}

.read-more-button[data-type="araştırma"] {
    background-color: #4036ee; 
}

.read-more-button[data-type="research"] {
    background-color: #4036ee; 
}

.read-more-button[data-type="webinar"] {
    background-color: #ff3f66; 
}




.readMoreArrowContainer{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

.arrow{
    width:70px;
}

#loadMoreButtonContainer{
    display:flex;
    width:100%;
    justify-content:center;
    padding-top:3%;
    padding-bottom:3%;
}

    #loadMoreButton {
        padding: 15px 20px;
        background-color: white;
        color: gray;
        border: none;
        cursor: pointer;
        border-radius: 50px;
    }
    

/**********FOOTER****************/
footer {
    background: #999;
    padding: 4% 0; /* Added padding for spacing */
    min-width:100%;
    position:relative;
}

#footerContainer{
    width:70%;
    display:flex;
    flex-direction:row;
    margin:auto;
    align-items:center;
}

#footerLeftContainer{
    display:flex;
    color:white;
    font-size:12px;
}

#footerLeftContainer p{
    font-size:14px;
}

#footerMiddleContainer{
    display:flex;
    margin-left:auto;
    font-size:30px;
    color:white;
    font-weight:600;
    padding-right:2%;
}

#footerRightContainer{
    display:flex;
    flex-direction:row;
}

.socialIcons{
    width:30px;
    margin: 0 3px 0 3px;
}


@media screen and (max-width:1200px) and (min-width:300px){
    
.form{
     width:80%;
    display:flex;
    justify-content:space-between;
    flex-direction:row;
    margin-top:5px;
}

.dropdownButtonContainer {
    padding: 3% 0% 3% 0%;
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    width: 100%;  /* Bu %100, ebeveynin genişliğini alacak şekilde çalışır */
    flex-direction:column;
    gap:10px;

}

.filterContainer{
    display:flex;
    width:100%;
}


/* Optional: Add hover or focus styles */
.dropdownSelect:focus {
    border-color: magenta; /* Change border color on focus */
    outline: none;
}

.inputAndButtonsContainer {
    display: flex;
    gap: 7px;
    flex-direction: row;
    margin-left: 0; 
    padding: 10px 10px 10px 0;
    justify-content: flex-start;
    width: 100%; 
    height:55px;
}
.input {
       
        width:400px !important;
        padding: 5px; /* İçerik dolgusunu artırmak için */
        font-size: 16px; /* Yazı boyutunu artırmak için */
        border: 1px solid #ccc; /* Kenarlık eklemek için */
        border-radius: 25px; /* Kenarları yuvarlatmak için */
    }

.input:focus{
    border-color:magenta;
    outline: none;
}

.butonlar{
    background:rgb(255, 255, 255);
    border-radius:7px;
    color:grey;
    border:none;
    padding:5px 10px 5px 10px;
    cursor: pointer;
    font-size:10px;
}

}


@media screen and (max-width:1400px) and (min-width:1200px){
    #cardsContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 80%;
    margin: 20px 0;
}
}


@media screen and (max-width:1200px) and (min-width:800px){
    #cardsContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 80%;
    margin: 20px 0;
}




}

@media screen and (max-width:800px) and (min-width:200px){
    #cardsContainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    width: 80%;
    margin: 20px 0;
}


}




@media screen and (max-width: 1000px) and (min-width: 350px) {
footer {
    padding: 4% 0; 
    min-width:70%;
}
    
    #footerContainer{
    width:90%;
    display:flex;
    flex-direction:row;
    margin:auto;
    align-items:center;
}

#footerMiddleContainer{
    display:flex;
    margin-left:auto;
    font-size:20px;
    color:white;
    font-weight:600;
    padding-right:2%;
}

}

@media screen and (max-width: 1000px) and (min-width: 650px) {
footer {
    padding: 4% 0; 
    min-width:70%;
}
    
    #footerContainer{
    width:90%;
    display:flex;
    flex-direction:row;
    margin:auto;
    align-items:center;
}

#footerMiddleContainer{
    display:flex;
    margin-left:auto;
    font-size:20px;
    color:white;
    font-weight:600;
    padding-right:2%;
}

}

@media screen and (max-width: 650px) and (min-width: 350px) {
footer {
    padding: 4% 0; 
    min-width:70%;
}
    
    #footerContainer{
    width:90%;
    display:flex;
    flex-direction:row;
    margin:auto;
    align-items:center;
}

#footerMiddleContainer{
    display:flex;
    margin-left:auto;
    font-size:16px;
    color:white;
    font-weight:500;
    padding-right:2%;
}

.socialIcons{
    width:20px;
    margin: 0 3px 0 3px;
}

}