:root{
    --dark-color:#ffffff;
    --light-color:#ffffff;
}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;padding:0;font-family: var(--theme-font);font-weight:400;color: var(--theme-body-color);}
*{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;box-sizing:border-box;}
img{max-width:100%;display:inline;vertical-align:bottom}
ul,li{margin:0;padding:0;text-decoration:none;display:block;list-style:none}
input,textarea{outline:0;display:block}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;text-transform:none;font-weight:700;}

h1{font-size:21px}
h2{font-size:19px}
h3{font-size:17px}
h4{font-size:16px}
h5{font-size:15px}
h6{font-size:13px}

.temizle,.clear{clear:both}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}
a:focus,a:hover,a:active{outline:0;text-decoration: none;color:#333}
a{text-decoration: none;color:inherit;}

html, body , .tripleContent {height: 100%;font-family: arial;} 
.tripleContent {display: flex;align-items: center;justify-content: center; } 
.tripleContent > div {height: 100%;width: 25%;position: relative;z-index: 5;display: flex;align-items: center;justify-content: center;} 
.tripleContent > div > div { width: 100%; text-align: center; }
.tripleContent > div .item {height: 100%;z-index: 5;position: relative;display: block;width: 100%;}
.tripleContent > div .item .logos {min-height: 138px;}
.tripleContent > div:last-child .item .logos {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tripleContent .item .logos img {width: 195px;display: inline-block;vertical-align: middle;margin: 0 21px;} 

.tripleContent > div:nth-child(3) .item .logos img {width: 195px;margin-top: 30px;}
.tripleContent > div:nth-child(1) .item .logos img:nth-child(2) {width: 96px;}
.tripleContent > div:nth-child(1) .item .logos img { vertical-align: top; } 
.tripleContent > div:nth-child(2) .item .logos img:nth-child(1) { width: 195px; }
.tripleContent > div:nth-child(4) .item .logos img {width: 230px;}
.tripleContent > div:nth-child(5) .item .logos img {width: 250px;}

.tripleContent > div + div {border-left: 1px solid rgb(0 0 0 / 8%);} 
.btn {transition: all .3s ease;display: block;margin: 0 auto;width: 180px;border: 3px solid #797979;border-radius: 35px;padding: 10px 0;font-size: 16px;margin-top: 30px;font-weight: bold;color: #797979;}
.tripleContent > div .item:hover img {/* transform: rotate3d(0, 1, 0, 360deg); *//* transition: all 1s ease; */}
.btn:hover { color: white; background: #797979; }


.tripleContent:before {background-image: radial-gradient(circle at 50% 0,var(--light-color),var(--dark-color) 79%);}
.tripleContent::after, .tripleContent:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-transition: all .7s ease; -webkit-transition: all .7s ease; transition: all .7s ease; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; z-index: 0; }
.tripleContent::after { opacity: 0; } 

.tripleContent > div:before {content: "";position: absolute;inset: 0;background: radial-gradient(circle at 50% 0, var(--light-color), #f2f2f2 79%);transition: all .3s ease;opacity: 0;}
.tripleContent > div.active:before { opacity: 1; }
.tripleContent > div:nth-child(3):before { background-image: radial-gradient(circle at 0% 0,var(--light-color),var(--dark-color) 79%); }
.mainLogo { position: absolute; top: 10%; z-index: 99; left: 50%; transform: translateX(-50%); }
.mainLogo img {width: 320px;} 

@media(max-width:992px){
    .mainLogo{display:none;}
    .tripleContent > div{height: 25%;width: 100%;align-items: center;}
    .tripleContent{display:block;}
    .tripleContent > div .item{ padding-bottom: 0; }
    .tripleContent > div + div {border-left:0;border-top: 1px solid rgb(0 0 0 / 8%);background: #ffffff;}
}

@media(max-width:768px){
    .tripleContent .item .logos img{width: 60px;}
    .tripleContent > div:nth-child(4) .item .logos img{
    width: 160px;
}
    .tripleContent > div:nth-child(1) .item .logos img:nth-child(2){width: 60px;}
    .tripleContent > div:nth-child(3) .item .logos img{width: 130px;}
    .tripleContent > div .item .logos{min-height: 88px;}
    .tripleContent > div:nth-child(2) .item .logos img:nth-child(1){ width: 125px; }
    .btn{ margin-top: 15px; } 
}