.slider-container {
position: relative;
width: 100%;
height: 100vh;
background-color: #333;
overflow: hidden;
}
.slider-container .slide:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
background: #000;
height: 100%;
z-index: 2;
opacity: 45%;
}.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
align-items: end;
}.slider-container .slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}.slider-container .slide.active {
opacity: 1;
}.slider-container .slide.active img {
z-index: 1;
}.slider-container .slide .textic {
max-width: 900px;
position: relative;
z-index: 9;
color: #fff;
text-align: center;
margin: 0 auto;
margin-top: 0;
zoom: 80%;
margin-bottom: 60px;
}.slider-container .slide .textic .btn {
padding: 15px 35px;
border-radius: 50px;
font-weight: 600;
display: inline-block;
margin: 0 10px;
cursor: pointer;
background: #014383;
color: #ffffff;
border: 2px solid #014383;
box-shadow: 0 0 15px #01438366;
}.slider-container .slide .textic .btn2 {
padding: 15px 35px;
border-radius: 50px;
font-weight: 600;
display: inline-block;
margin: 0 10px;
cursor: pointer;
border: 2px solid #ffffff;
color: #ffffff;
}.slider-container .slide .textic .text1 {
display: block;
font-size: 54px;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.1;
}.slider-container .slide .textic .text1 span {
font-weight: 300;
}.slider-container .slide .textic .text2 {
display: block;
font-weight: 500;
font-size: 1.2rem;
margin-bottom: 40px;
}.slider-container .slide.active {
opacity: 1;
}.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #00000080;
fill: #fff;
border: none;
padding: 5px 10px;
font-size: 23px;
display: flex;
align-items: center;
font-weight: 700;
cursor: pointer;
border-radius: 5px;
z-index: 10;
transition: background-color 0.3s ease;
height: 42px;
width: 42px;
}.slider-container .slider-btn:hover {
background-color: #000c;
}.slider-container .prev-btn {
left: 15px;
}.slider-container .next-btn {
right: 15px;
}@media (max-width: 1024px) {
.slider-container .slide .textic {
display: none;
}.slider-container {
height: 50vh;
}
}a.WhatsApp1 {
display: flex;
font-size: 18px;
background: #2eb843;
font-weight: 600;
width: 51px;
height: 51px;
position: fixed;
bottom: 20px;
left: 20px;
border-radius: 50%;
-webkit-transition: all 0.1s ease-out 0s;
-moz-transition: all 0.1s ease-out 0s;
-ms-transition: all 0.1s ease-out 0s;
-o-transition: all 0.1s ease-out 0s;
transition: all 0.1s ease-out 0s;
color: #fff;
align-items: center;
justify-content: center;
animation: whatsapp infinite 2s linear;
z-index: 9999;
}a.WhatsApp1 svg {
width: 24px;
height: 24px;
fill: white;
}@keyframes whatsapp {
0% {
box-shadow: 0 0 0 0 #2eb843;
}50% {
box-shadow: 0 0 0 10px #015dc700;
}100% {
box-shadow: 0 0 0 0 #015dc700;
}
}@media (max-width: 1024px) {
a.WhatsApp1 {
bottom: 60px;
}
}.feature-component {
padding: 90px 0px;
}.feature-component .main-layout {
display: flex;
gap: 40px;
margin-bottom: 90px;
align-items: center;
}.feature-component .image-wrapper {
flex: 1;
}
.feature-component .image-wrapper img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 30px;
}.feature-component .content-wrapper {
flex: 1;
}.feature-component .section-badge {
color: #014383;
font-weight: 700;
font-size: 14px;
margin-bottom: 15px;
display: flex;
align-items: center;
}.feature-component .section-badge::after {
content: "";
display: inline-block;
width: 30px;
height: 2px;
background: #014383;
margin-left: 10px;
}.feature-component .section-title {
font-size: 40px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
margin-top: 0;
}.feature-component .section-desc {
margin-bottom: 20px;
font-weight: 400;
color: #797e88;
font-size: 16px;
line-height: 26px;
}.feature-component .stats-grid {
display: flex;
gap: 80px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px 0;
margin-bottom: 25px;
}.feature-component .stat h3 {
margin-bottom: 0;
margin-top: 0;
font-size: 46px;
line-height: 1.25em;
}.feature-component .stat p {
font-size: 14px;
color: #888;
margin-top: 5px;
margin-bottom: 5px;
}/* Buton ve Liste */
.feature-component .action-area {
display: flex;
gap: 40px;
align-items: center;
flex-wrap: wrap;
}
.feature-component .cta-button {
background: #014383;
color: #fff;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
}.feature-component .cta-button2 {
background: transparent;
color: #014383;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
border: solid #014383;
}.feature-component .check-list {
list-style: none;
color: #797e88;
font-size: 16px;
line-height: 26px;
margin: 0;
padding-left: 10px;
}.feature-component .check-list li::before {
content: "• ";
color: #014383;
font-weight: bold;
}/* ALT KARTLAR VE MASKELEME */
.feature-component .features-footer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}.feature-component .item-card {
padding-bottom: 0px;
}.feature-component .icon-box {
position: relative;
width: auto;
height: auto;
}.feature-component .circle-bg {
align-items: center;
justify-content: center;
}.feature-component .circle-bg svg {
width: 50px;
height: 50px;
overflow: inherit;
fill: #014383;
}.feature-component .badge-dot {
position: absolute;
bottom: 10px;
right: 10px;
background: #014383;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}.feature-component .item-card h4 {
margin: 15px 0 10px;
font-size: 18px;
margin-bottom: 20px;
border-bottom: 1px solid #d8dde1;
padding-bottom: 20px;
}.feature-component .item-card p {
font-size: 14px;
color: #777;
line-height: 1.5;
}/* MOBİL UYUM */
@media (max-width: 992px) {
.feature-component .main-layout {
flex-direction: column;
margin-bottom: 50px;
}
.feature-component .features-footer {
grid-template-columns: repeat(2, 1fr);
}
}@media (max-width: 600px) {
.feature-component .features-footer {
grid-template-columns: 1fr;
}
.feature-component .section-title {
font-size: 30px;
}
.feature-component .stats-grid {
flex-direction: column;
}
}@media (max-width: 1024px) {
.feature-component .image-wrapper {
display: none;
}.feature-component .stats-grid {
display: none;
}.feature-component .action-area {
gap: 15px;
}
}.companies-large {
display: flex;
flex-wrap: wrap;
height: 600px;
}.company-block {
flex: 1;
min-width: 50%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
padding: 60px;
}.company-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: var(--transition);
}.company-block .company-overlay.renk1 {
background: #d765279c;
}
.company-block .company-overlay.renk2 {
background: linear-gradient(
135deg,
rgba(0, 51, 102, 0.8) 0%,
rgba(0, 86, 179, 0.4) 100%
);
}.company-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 500px;
}.company-logo-wrapper i {
font-size: 4rem;
margin-bottom: 20px;
display: block;
}
.company-logo-wrapper h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: white;
}.company-content p {
font-size: 1.1rem;
transform: translateY(0);
color: white;
}.companies-large .btn3 {
padding: 15px 35px;
border-radius: 50px;
font-weight: 600;
display: inline-block;
margin: 0 10px;
cursor: pointer;
background: #d76527;
color: #ffffff;
border: 2px solid #d76527;
}.companies-large .btn4 {
padding: 15px 35px;
border-radius: 50px;
font-weight: 600;
display: inline-block;
margin: 0 10px;
cursor: pointer;
background: #014383;
color: #ffffff;
border: 2px solid #014383;
}@media (max-width: 1024px) {
.companies-large {
display: block;
height: auto;
}.company-block {
padding: 60px 20px;
}
}/* Ana Konteyner Ayarları */
.companies-large {
display: flex;
flex-wrap: nowrap; /* Yan yana kalmalarını zorla */
height: 650px;
overflow: hidden;
gap: 0;
}.company-block {
flex: 1; /* Her iki blok eşit başlar */
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Akıcı genişleme */
filter: grayscale(100%); /* Başta siyah beyaz */
}/* Hover anında Genişleme ve Renklenme */
.company-block:hover {
flex: 2; /* Üzerine gelinen blok 2 kat genişler */
filter: grayscale(0%); /* Renkler geri gelir */
}/* Arka Plan Resim Kontrolü */
.company-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit; /* Arka plan resmini HTML'den alır */
background-size: cover;
background-position: center;
transition: transform 1.5s ease;
}.company-block:hover::before {
transform: scale(1.1); /* Resim arkada hafifçe büyür */
}/* Overlay Katmanı */
.company-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.7;
transition: opacity 0.5s ease;
}.company-block:hover .company-overlay {
opacity: 0.4; /* Resim daha netleşsin */
}/* İçerik Düzeni */
.company-content {
position: relative;
z-index: 5;
text-align: center;
padding: 40px;
width: 100%;
transition: all 0.5s ease;
}/* Başlık ve Logo Animasyonu */
.company-logo-wrapper img {
width: 120px !important;
margin-bottom: 15px;
transition: transform 0.6s ease;
}.company-block:hover .company-logo-wrapper img {
transform: scale(1.1) translateY(-10px);
}.company-logo-wrapper h2 {
font-size: 3rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -1px;
margin-bottom: 15px;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}/* Yazı ve Buton Başta Gizli (Aşağıda) */
.company-content p {
max-width: 400px;
margin: 0 auto 30px;
opacity: 0;
transform: translateY(30px);
transition: all 0.5s ease 0.2s;
}.companies-large .btn3,
.companies-large .btn4 {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s ease 0.4s;
border: 2px solid #fff;
background: transparent;
border-radius: 0; /* Modern kare buton */
padding: 15px 40px;
}/* Hover ile İçerik Reveal (Ortaya Çıkma) */
.company-block:hover .company-content p,
.company-block:hover .btn3,
.company-block:hover .btn4 {
opacity: 1;
transform: translateY(0);
}/* Butonun Kendi Hoverı */
.companies-large .btn3:hover {
background: #d76527;
border-color: #d76527;
color: #fff;
}
.companies-large .btn4:hover {
background: #014383;
border-color: #014383;
color: #fff;
}/* Mobil Ayarlar */
@media (max-width: 1024px) {
.companies-large {
flex-direction: column;
height: auto;
}
.company-block {
height: 400px;
filter: grayscale(0%);
}
.company-content p,
.btn3,
.btn4 {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
/**//**/.client-style01 .special-text {
line-height: 26px;
letter-spacing: 2.4px;
position: relative;
padding-left: 17px;
color: #014383;
font-weight: 700;
font-size: 14px;
margin-bottom: 35px;
align-items: center;
text-transform: uppercase;
}.client-style01 .special-text::before {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: -40px;
text-align: center;
content: "";
display: inline-block;
width: 30px;
height: 2px;
background: #014383;
margin-left: 10px;
}.client-style01 {
text-align: center;
}.client-style01 h2 {
color: black;
letter-spacing: 0.4px;
font-size: 40px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 40px !important;
margin-top: 0 !important;
max-width: 700px;
margin: 0 auto;
}.client-style01 {
padding-bottom: 80px;
padding-top: 80px;
}.client-style01 .client-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}.client-style01 .client-wrap .client-item {
width: 26%;
display: flex;
justify-content: center;
align-items: center;
padding: 44px 20px;
position: relative;
transition: 0.3s;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}.client-style01 .client-wrap .client-item::before {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
content: "";
background: linear-gradient(to right, #00aab8, #00578a);
opacity: 0;
transition: 0.3s;
}.client-style01 .client-wrap .client-item:nth-child(4),
.client-style01 .client-wrap .client-item:nth-child(5),
.client-style01 .client-wrap .client-item:nth-child(6),
.client-style01 .client-wrap .client-item:nth-child(9),
.client-style01 .client-wrap .client-item:nth-child(10) {
border-bottom: 0;
}.client-style01 .client-wrap .client-item:last-child {
border-right: 0;
}.client-style01 .client-wrap .client-item:hover {
/* background: linear-gradient(to right, #fdc32a 0%, #e14e0a 100%); */
box-shadow: 0px 16px 32px 0px rgba(0, 62, 131, 0.2);
}.client-style01 .client-wrap .client-item:hover::before {
opacity: 1;
}.client-style01 .client-wrap .client-item img {
transition: 0.3s;
}.client-style01 .client-wrap .client-item:hover img {
/* filter: brightness(0) invert(1); */
}.client-style01 .client-wrap .client-item a {
max-width: 200px;
}.client-style01 .client-wrap .client-item a img {
width: 100%;
}.client-style01 .client-item {
width: 33.33%;
}@media screen and (max-width: 991px) {
.client-style01 .client-wrap .client-item {
width: 33%;
padding: 20px 20px;
}
.client-style01 .client-wrap .client-item:nth-child(5) {
border-right: 1px solid #eeeeee;
}
.client-style01 .client-wrap .client-item:last-child {
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
}
.client-style01 .client-wrap .client-item:nth-child(6) {
border-bottom: 1px solid #eeeeee;
border-right: 0;
}
.client-style01 .client-wrap .client-item:nth-child(3),
.client-style01 .client-wrap .client-item:nth-child(9) {
border-right: 0;
}
.client-style01 .client-wrap .client-item:nth-child(7),
.client-style01 .client-wrap .client-item:nth-child(8),
.client-style01 .client-wrap .client-item:nth-child(9) {
border-bottom: 1px solid #eeeeee;
}
}/* Responsive for mobile */
@media screen and (max-width: 767px) {
.client-style01 .client-wrap .client-item {
width: 33%;
padding: 20px 20px;
}
.client-style01 .client-wrap .client-item:nth-child(2),
.client-style01 .client-wrap .client-item:nth-child(4),
.client-style01 .client-wrap .client-item:nth-child(6),
.client-style01 .client-wrap .client-item:nth-child(8),
.client-style01 .client-wrap .client-item:last-child {
border-right: 0;
border-left: 0;
}
.client-style01 .client-wrap .client-item:nth-child(3) {
border-right: 1px solid #eeeeee;
}
.client-style01 .client-wrap .client-item:nth-child(5) {
border-left: 0;
}
.client-style01 .client-wrap .client-item:nth-child(9) {
border-bottom: 0;
border-right: 1px solid #eeeeee;
}
}@media (max-width: 1024px) {
.client-style01 {
padding-bottom: 40px;
padding-top: 70px;
}
}/**/.gridbg {
width: 100%;
background: #f3f3f3;
padding: 90px 0px;
}.gridbg h2 {
width: 100%;
margin-bottom: 50px;
font-weight: 700;
text-align: center;
font-size: 40px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
margin-top: 0;
display: block;
}.grid {
width: 100%;
display: inline-flex;
justify-content: center;
}.grid figure {
position: relative;
overflow: hidden;
margin: 10px 1%;
min-width: 520px;
max-width: 680px;
max-height: 660px;
width: 48%;
background: #3085a3;
text-align: center;
cursor: pointer;
}.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}.grid figure figcaption {
padding: 2em;
color: #fff;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}.grid figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}.grid figure h2 span {
font-weight: 800;
}.grid figure h2,
.grid figure p {
margin: 0;
}.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 3.75em;
background: #fff;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}figure.effect-zoe h2 {
float: left;
font-size: 25px;
}figure.effect-zoe p.icon-links a {
float: right;
color: #3c4a50;
font-size: 1.4em;
}figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
color: #252d31;
}figure.effect-zoe p.description {
position: absolute;
bottom: 6em;
padding: 2em;
color: #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}figure.effect-zoe .logo {
position: absolute;
bottom: 190px;
padding: 2em;
color: #fff;
text-transform: none;
font-size: 40%;
opacity: 1;
max-width: 160px;
left: 0;
right: 0;
margin: 0 auto;
}
.grid figure .logo img {
opacity: 1;
}figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}figure.effect-zoe p.icon-links a span::before {
display: inline-block;
padding: 8px 10px;
font-family: "feathericons";
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}.icon-eye::before {
content: "\e000";
}.icon-paper-clip::before {
content: "\e001";
}.icon-heart::before {
content: "\e024";
}figure.effect-zoe h2 {
display: inline-block;
}figure.effect-zoe:hover p.description {
opacity: 1;
}figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}figure.effect-zoe:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}figure.effect-zoe:hover p.icon-links a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}figure.effect-zoe:hover p.icon-links a:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}figure.effect-zoe:hover p.icon-links a:first-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}@media (max-width: 1024px) {
.grid {
display: block;
padding: 30px 0px;
}figure.effect-zoe .logo {
bottom: 120px;
}.grid figure {
position: relative;
overflow: hidden;
margin: 10px 1%;
min-width: 100%;
max-width: 100%;
max-height: 100%;
width: 100%;
}
}