/* main */

main {
    padding: 12.5% 0% 12.5% 0%;
    background-image: url(/images/about-us-bg.webp);
    background-size: 56% auto;
}

.main-content h1 {
	font-size: 45px;
}

/* main */

/* main 767 */

@media only screen and (max-width: 767px) {
	.main-content h1 {
		font-size: 35px;
	}

	main {
		background-image: url(/images/about-us-bg-mobile.webp);
	}
}

/* main 767 */

/* projeler-section */

#projeler-section {
    max-width: 1660px;
	margin-right: auto;
	margin-left: auto;
    margin-top: 100px;
}

#projeler-section h2 {
    font-size: 35px;
    font-weight: 700;
    color: var(--darkBlue);
    text-align: center;
}

#projeler {
    margin-top: 100px;
}

.projeler-item {
    margin-top: 32px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 16px 1fr 16px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.projeler-title {
    background-color: var(--backgroundBlue);
    padding-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.projeler-title h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--darkBlue);
}

.projeler-info {
    margin-top: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
}

.projeler-info span {
    font-family: var(--inter);
    color: var(--textPrimary);
}

.projeler-item-divider {
    display: -ms-grid;
    display: grid;
    grid-auto-flow: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 16px;
    margin-top: 16px;
}

/* projeler-section */

/* projeler-section 767 */

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

    #projeler {
        padding: 0 10px;
    }
	.projeler-item {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .projeler-item-divider {
        grid-auto-flow: row;
    }

    .projeler-title {
        padding: 10px;
    }
}

/* projeler-section 767 */

/* footer */

footer {
    margin-top: 200px;
}

/* footer */