body {
    font-family: 'Poppins', sans-serif;	
}

.abdcontainer {
    padding:70px; background-color:#fff; border-radius:20px; color:#000; margin-bottom:100px; padding-bottom:100px;
    background-image: url("img/abd.jpg");
    background-repeat: no-repeat;
    background-position: right 50px bottom -5px;
    background-size:300px;
}

.abdcontainer ul {
    margin:0px;
    padding:0px;
}

.abdcontainer ul li {
    margin-bottom:10px;
    border-radius:25px;
    background-color:#f8f8f8;
    list-style:none;
    padding:10px 20px 10px 20px;
    font-size:16px;
    
}

.abdtitle {
    font-size:45px;
    font-weight: 800;
    color: #3319ba;
    background-image: -webkit-linear-gradient(0deg, #3319ba 21%, #89d1f5 92%);
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.circle-list img {
        width: 320px;
    }

.firstbg {
    background-image: url("img/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow-x: hidden;
}

.logorow {
    padding:80px 50px 50px 50px;
}

.sloganrow {
    position: relative;
    padding:120px 0px 50px 120px;
}

.slogan {
    margin-top:20px;
}

.sloganrow h1 {
    color:#fff;
    font-weight: 600;
    font-size: 50px;
}

.sloganrow span {
    font-size: 80px;
    font-weight: 800;
    color: #3319ba;
    background-image: -webkit-linear-gradient(0deg, #3319ba 21%, #89d1f5 92%);
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}

.sloganrow ul {
    position: absolute;
    right: -160px;
}

.sloganrow ul li {
    list-style: none;
    float: right;
    margin-right: 50px;
}


.circle-list li {
    transition: transform 0.1s; /* Dönme animasyonu */
}

.infotext {
    padding:120px 120px 50px 120px;
    font-size: 20px;
    margin-top:10px;
    color:#fff;
}



.hizmetlerbg {
    background-image: url("img/gradient-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow-x: hidden;
    padding-top:120px;
    padding-bottom:120px;
}

.hizmetRow h2 {
    color:#151515;
    font-weight: 800;
    font-size: 50px;
    margin-bottom:50px;
}

.hizmetCol {
    margin-bottom:80px;
}

.hizmetCol h3 {
    color:#fff;
    margin-top:15px;
    font-weight: 700;
}

.hizmetCol p {
    color:#fff;
    font-weight: 300;
    font-size: 20px;
}

.footer {
    padding:50px;
    background-color:#151515;
}

.footer a {
    font-size: 40px;
    font-weight: 800;
    color: #3319ba;
    background-image: -webkit-linear-gradient(0deg, #3319ba 21%, #89d1f5 92%);
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}


.purposebg {
    background-image: url("img/purpose-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 100px;
}

.borderradius {
    border: 2px solid #fff;
    border-radius: 50px;
    min-height: calc(100vh - 200px); /* Padding'i hesaba kat */
    padding:100px;
}

.purposeCol {
            display: flex;
            flex-direction: column; /* Dikey hizalama için */
            justify-content: center; /* Yatayda ortalama */
        }

.purposeCol h2 {
    
    color:#fff;
    font-size: 60px;
    font-weight: 700;
    margin-bottom:50px;
}

.purposeCol p {
    color:#fff;
    font-weight: 300;
    font-size: 20px;
    margin-bottom:50px;
}

.purposeCol h3 {
    font-size: 40px;
    font-weight: 500;
    color:#fff;
}

.sloganList {
    color:#fff;
    font-size: 60px;
    font-weight: 700;
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.5s ease; /* Opaklık geçişi */
}

.heroPeople {
    position: absolute;
    bottom:0px;
    right: 600px;
    z-index: 20;
}

.heroIcon img {
    max-width: 500px;
}

.heroIcon {
    position: absolute;
    top:280px;
    right: 250px;
    z-index: 19;
}

.purposeCol p {
        max-width: 540px;
    }

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

    .circle-list img {
        width: 280px;
    }
    
    .slogan {
        max-width: 430px !important;
    }
    
    .purposeCol {
        z-index: 40;
    }
    
    .purposeCol p {
        max-width: 400px;
    }
    
    .heroIcon img {
        max-width: 400px;
    }
    
    .heroPeople {
        position: absolute;
        bottom: 0px;
        right: 400px;
        z-index: 20;
    }
 
    
}

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

    .infotext {
        padding: 20px 120px 50px 120px;
        font-size: 20px;
        margin-top: 10px;
        color: #fff;
    }
    
    .sloganrow {
        position: relative;
        padding: 30px 0px 50px 120px;
    }

    .heroPeople img {
        max-width: 400px;
    }
    
    .heroIcon {
        position: absolute;
        top: 250px;
        right:150px;
        z-index: 19;
    }
    
    .heroPeople {
        position: absolute;
        bottom: 0px;
        right: 300px;
        z-index: 20;
    }
    
    .circle-list img {
        width: 230px;
    }
    
    .slogan {
        max-width: 430px !important;
    }
    
}

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

    .footer a {
    font-size:28px;
}
    
    .circle-list img {
        width: 200px;
    }
    
    .slogan {
        max-width: 430px !important;
    }
    
    .sloganrow {
        position: relative;
        padding: 120px 0px 50px 50px;
    }
    
    .infotext {
        padding: 30px 50px 50px 50px;
        font-size: 20px;
        margin-top: 10px;
        color: #fff;
    }
    
    
    
}

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

	
}

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


}

@media only screen and (max-width : 1024px) {
    
    .sloganrow {
        position: relative;
        padding: 150px 0px 50px 50px;
    }
    
 
    .sloganrow ul li {
        margin-right: 20px;
    }
    
    .borderradius {
        border: 2px solid #fff;
        border-radius: 50px;
        min-height: calc(100vh - 200px);
        padding: 50px;
    }
    
    .heroIcon img {
        max-width: 350px;
    }
    
    .heroIcon {
        position: absolute;
        top:auto;
        bottom:300px;
        right: 150px;
        z-index: 19;
    }
    
    .heroPeople img {
        max-width: 350px;
    }
	
	
}

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

    .sloganrow ul {
        position:inherit;
        right: -160px;
    }
    
    .slogan {
        max-width:none !important;
    }
    
    .sloganrow ul {
        margin-top:100px;
        position: inherit;
        right: -80px;
    }
    
    .sloganrow {
        position: relative;
        padding: 80px 0px 50px 50px;
    }
    
    .infotext {
        padding-bottom:130px;
    }
    
    .purposebg {
        padding: 50px;
    }
    
    .heroIcon {
        position: absolute;
        top: auto;
        bottom: 240px;
        right: 100px;
        z-index: 19;
    }
    
    .heroIcon img {
        max-width: 270px;
    }
    
    .heroPeople img {
        max-width: 280px;
    }
	

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


@media only screen and (max-width : 580px){
 
    
    .abdcontainer {
        padding:30px;
        padding-bottom:550px;
    }
    
    .infotext {
        padding: 10px;
        padding-bottom:50px;
    }
    
    .footer a {
        font-size: 20px;
    }
    
    .hizmetCol {
        text-align: center;
    }
    
    .hizmetRow h2 {
        text-align: center;
    }
    
    .hizmetCol p {
        font-size: 16px;
    }
    
    .hizmetCol h3 {
        font-size: 34px;
    }
    
    .hizmetCol {
        margin-bottom: 0px;
    }
    
    .purposeCol h2 {
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    
    .borderradius {
        border: 2px solid #fff;
        border-radius: 30px;
        min-height: calc(100vh - 200px);
        padding: 20px;
    }
    
    .purposeCol h3 {
        font-size: 25px;
        font-weight: 500;
        color: #fff;
        margin:0px;
    }
    
    .sloganList {
        color: #fff;
        font-size: 40px;
        font-weight: 700;
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    
    .heroPeople img {
        max-width: 180px;
    }
    
    
    
    .heroPeople {
        position: absolute;
        bottom: 0px;
        right: 150px;
        z-index: 20;
    }
    
    .heroIcon img {
        max-width: 90px;
    }
    
    .purposeCol p {
        color: #fff;
        font-weight: 300;
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .heroIcon {
        position: absolute;
        top: 90px;
        bottom:auto;
        right: 100px;
        z-index: 19;
    }
    
    .logorow {
        padding:10px;
        padding-top:50px;
    }
    
    .sloganLogo {
        max-width: 130px;
        margin-top:20px;
    }
    
    .sloganrow {
        position: relative;
        padding:10px;
    }
    
    .sloganrow h1 {
        font-size: 35px;
    }
    
    .sloganrow span {
        font-size: 50px;
    }
    
    .sloganrow ul {
        position:inherit;
        right:0px;
    }
    
     .circle-list img {
        width: 80px;
    }
    
    .sloganrow ul {
        margin-top:100px;
    }
    
    .slogan {
        text-align: center;
    }
    
    .infotext {
        text-align: center;
    }
	
}


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


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

}

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

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


}


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



}

@media only screen and (min-width : 1360px) {


}

@media only screen and (min-width : 1439px) {


}

@media only screen and (min-width : 1599px) {



}