.banner {
    background-image: url(../img/bannners-oto.png) !important;
    width: 100% !important;
    height: 75vh !important;
    background-repeat: no-repeat;
	background-size: cover;
}
.gelecek{
    color: #FFF;
font-family: Poppins;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.gelecek span{
    color: var(--Blue, #26ABE2);
font-family: Poppins;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.banner-title{
    color: #FFF;
font-family: Poppins;
font-size: 42px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 142.857% */   
margin-bottom: 32px;
margin-top: 12px;
}
.banner-detail{
    color: #C6C8CB;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.row-orta {
    height: 87vh;
    display: flex;
    align-items: center;
}
.banner-imgs{
    width: 375px;
}
.box{
	position: absolute;
	top: 67%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.box span{
	display: block;
	width: 15px;
	height: 15px;
	border-bottom: 2px solid white;
	border-right: 2px solid white;
	transform: rotate(45deg);
	margin: -10px;
	animation: animate 2s infinite;
}

.box span:nth-child(2)
{
	animation-delay: -0.2s;
}

.box span:nth-child(3)
{
	animation-delay: -0.4s;
}

@keyframes animate{
	
	0%{
		opacity: 0;
		transform: rotate(45deg) translate(-20px, -20px);
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: rotate(45deg) translate(20px, 20px);
	}
}
.sekil{
    color: var(--black-black-400, #4D5259);
font-family: Poppins;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: center;
margin-top: 92px;
}
.sekil span{
    color: var(--Blue, #26ABE2);
font-family: Poppins;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.sekil-title{
    color: var(--black-black-500, #21272F);
text-align: center;
font-family: Poppins;
font-size: 42px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 142.857% */
}
.uygulama{
    color: var(--blue-blue-500, #77D0E2);
font-family: Poppins;
font-size: 42px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 20px;
}
.uygulama span{
    color: var(--black-black-500, #21272F);
font-family: Poppins;
font-size: 42px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.uygulama-detail{
    color: var(--black-black-400, #4D5259);
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 60px;
}
.mobile-img{
    width: 483px !important;
}
.button-title{
    color: #FFF;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-left: 12px;
}
.button-detail{
margin-left: 12px;

    color: #FFF;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.app{
    background-color: #4D5259 !important;
}
.indir-button{
	display: flex;
    margin-top: 60px;
    align-items: baseline;
    column-gap: 30px;
}
.yer {
    color: var(--black-black-500, #21272F);
    font-family: Poppins;
    font-size: 36px;
    padding-right: 200px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.yer span {
    color: var(--black-black-100, #BABCBF);
    font-family: Poppins;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.yer .dikkat{
	color: var(--blue-blue-500, #77D0E2);
font-family: Poppins;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.yer-iki {
    color: var(--black-black-500, #21272F);
    font-family: Poppins;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.yer-iki span{
	color: var(--black-black-100, #BABCBF);
font-family: Poppins;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.yer-iki .dikkat{
	color: var(--blue-blue-500, #77D0E2);
font-family: Poppins;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.sag-banner{
	display: flex;
	justify-content: end;
}
.mavi {
	    bottom: 10rem;
    z-index: -556;
    position: relative;
    border-radius: 314px;
    border: 6px solid rgb(119 208 226 / 91%) !important;
    width: 314px;
    height: 314px;
    padding: 87px 0 0 0;
    text-align: center;
}
.border-title{
	color: var(--black-black-500, #21272F);
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 130% */
letter-spacing: -0.18px;
}
.border-sayi{
	color: var(--blue-blue-500, #77D0E2);
font-family: Poppins;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.18px;
}
.border-detail{
	color: var(--black-black-500, #21272F);
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 144.444% */
letter-spacing: -0.18px;
}
.sag-phone{
	display: flex !important;
	justify-content: end !important;
}
.mobile-phones{
	margin-bottom: 100px !important;
}
.sol{
	padding-left: 6rem !important;
}
.charge-icon{
	margin: auto;
    display: flex;
    position: relative;
    top: 45px;
		box-shadow: 0px 4px 111.2px #FFF,
				  0px 4px 53.6px rgba(119, 208, 226, 0.24);
		border-radius: 274rem;
	}

.oval{
	border:6px solid rgb(119 208 226 / 91%) !important;
    border-radius: 314px;
    width: 314px;
    display: flex;
    margin: auto;
    height: 314px;
    justify-content: center;
}
.oval-orta{
	display: flex;
	text-align: center;
    flex-direction: column;
    justify-content: center;
}
.oval-title{
	color: var(--Black-black-500, #21272F);
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 130% */
letter-spacing: -0.18px;
}
.oval-sayi{
	color: var(--Blue-blue-500, #77D0E2);
font-family: Poppins;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.18px;
}
.oval-detail{
	color: var(--Black-black-500, #21272F);
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 144.444% */
letter-spacing: -0.18px;
}
.oval-bosluk{
	margin-top: 60px;
	margin-bottom: 80px;
}
.fabrika{
width: 100% !important;
}




.sol-iki{
	padding: 1rem;
}
@media screen and (max-width: 1508px) {
	.yer {
		color: var(--black-black-500, #21272F);
		font-family: Poppins;
		font-size: 33px;
		padding-right: 200px;
		font-style: normal;
		font-weight: 700;
		line-height: 30px;
	}
	.yer-iki {
		color: var(--black-black-500, #21272F);
		font-family: Poppins;
		font-size: 34px;
		font-style: normal;
		font-weight: 700;
		line-height: 35px;
	}
}
@media screen and (max-width: 1434px) {
	.yer {
		font-size: 30px;
	}
	.yer-iki {
		font-size: 30px;
	}
} 
@media screen and (max-width: 1360px) {
	.yer-iki {
		color: var(--black-black-500, #21272F);
		font-family: Poppins;
		font-size: 30px;
		font-style: normal;
		font-weight: 700;
		line-height: 17px;
	}
	.yer {
		line-height: 17px;
		font-size: 30px;
		padding-right: 130px;
	}
	.yer span{
		font-size: 25px;
	}
} 
@media screen and (max-width: 1220px) {
	.yer {
		line-height: 17px;
		font-size: 30px;
		padding-right: 61px;
	}
} 
@media screen and (max-width: 1200px) {
	
	.yer span { 
		font-size: 26px;
	}
	.mavi {
		bottom: 10rem;
		z-index: -556;
		position: relative;
		border-radius: 314px;
		border: 6px solid rgb(119 208 226 / 91%) !important;
		width: 100%;
		height: 295px;
		padding: 87px 0 0 0;
		text-align: center;
	}
} 
@media screen and (max-width: 1081px) {
	.yer {
		line-height: 17px;
		font-size: 30px;
		padding-right: 0;
	}
} 
@media screen and (max-width: 991px) {

	
	.mobile-phones {
		margin-bottom: 30px !important;
	}
	.sol{
		padding-left: 0 !important;
		text-align: center;
	}
	.sol-iki{
		text-align: center;
	}
	
	.bilgi-orta{
		justify-content: center !important;
	}
	.indir-button{
		justify-content: center;
	}
	.fabrika {
		width: 696px !important;
	}
	.sol{
		margin-top: 60px !important;
		margin-bottom: 60px !important;
	}
	.yer-degis-1{
		order: 2;
		margin-top: 60px !important;
		margin-bottom: 60px !important;
	}
	.yer-degis-2{
		order: 1;
	}
	.sag-phone{
		justify-content: center !important;
		margin-top: 70px !important;
	}
	.uygulama-detail {
		margin-bottom: 19px;
	}
	.indir-button {
		display: flex;
		margin-top: 25px;
		align-items: baseline;
		column-gap: 30px;
	}
	.uygulama {
		font-size: 36px;
		margin-bottom: 9px !important;
	}
	.uygulama span {
		font-size: 34px;
	}
	.oval-orta{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.mavi {
		width: 300px;
	}
	.banner-title {
		color: #FFF;
		font-family: Poppins;
		font-size: 42px;
		font-style: normal;
		font-weight: 600;
		line-height: 60px;
		margin-bottom: 10px;
		margin-top: 0px;
	}
	.row-orta {
		height: 100vh;
		display: flex;
		align-items: center;
	}
	.banner-imgs {
		width: 375px;
		height: 26rem !important;
		margin-top: 8rem;
		object-fit: contain;
	}
	.degisme-1{
		text-align: center;
		order: 2;
	}
	.degisme-2{
		order: 1;
	}
	.box{
		display: none !important;
	}
 .sag-banner{
	justify-content: center;
 }
 .banner {
    height: 850px !important;
}
  }
   @media screen and (max-width: 770px) {
	.banner-title {
		font-size: 35px;
		margin-bottom: 0px;
	}
	.yer{
		margin-bottom: 1rem;
	}
	.yer-iki{
		margin-bottom: 1rem;
	}
  } 
     @media screen and (max-width: 767px) {
		.sekil-title {
			font-size: 35px;
		}
		.fabrika{
			width: 600px !important;
		}
		
		
		
  } 
     @media screen and (max-width: 684px) {
		.mobile-img {
			width: 100% !important;
		}
		.yan {
			column-gap: 28px !important;
		}
}   
   @media screen and (max-width: 642px) {
	.yer {
		font-size: 28px;
	}
}  
  @media screen and (max-width: 605px) {
	.fabrika{
		width: 550px !important;
	}
	.yer-iki {
		font-size: 28px;
	}
}  
  @media screen and (max-width: 565px) {
	.fabrika {
		width: 464px !important;
	}
}  
  @media screen and (max-width: 538px) {
	.banner-title {
		font-size: 30px;
	}
	.banner-detail {
		font-size: 16px;
	}
}
@media screen and (max-width: 517px) {
	.uygulama {
		font-size: 33px;
		margin-bottom: 9px !important;
	}
	.uygulama span {
		font-size: 30px;
	}
}
@media screen and (max-width: 485px) {
	.bilgi-title{
		text-align: center !important;
	}
	.fabrika {
		width: 100% !important;
	}
}   
@media screen and (max-width: 469px) {
	.uygulama {
		font-size: 30px;
		margin-bottom: 9px !important;
	}
	.uygulama span{
		font-size: 25px !important;
		margin-bottom: 9px !important;
	}
	.uygulama-detail {
		font-size: 16px;
	}
}   
 @media screen and (max-width: 463px) {
	.banner-title {
		font-size: 30px;
		line-height: 40px;
		margin-top: 7px;
		margin-bottom: 7px !important;
	}
}
	 @media screen and (max-width: 455px) {
		.uygulama-detail{
			margin-bottom: 3rem !important;
		}
		.indir-button {
			display: grid !important;
		}
		.app{
			margin-bottom: 1rem;
		}
}
@media screen and (max-width: 377px) {
	.yer-iki {
		font-size: 26px;
	}
	.yer {
		font-size: 26px;
	}
} 
@media screen and (max-width: 352px) {
	.yer-iki {
		font-size: 24px;
	}
	.yer {
		font-size: 24px;
	}
}