/* SKIL Home Page - Pixel Perfect Match */
@font-face {
    font-display: swap;
    font-family: Brixton_Lead Vector;
    src: url('fonts/brixton-lead-vector.woff2') format("woff2");
    font-weight: 400;
    font-style: normal
}

.category-banner-media:before {
    display: none;
}
.container {
    max-width: 1440px;
}

.demo-section .container {
    max-width: 1190px;
}

main.skil-about {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: Inter, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.5px;
    line-height: 1.625;
    font-size: 1rem;
}

:root {
    --primary-color: #cb333b;
    --secondary-color: #08101a;
    --text-dark: #08101a;
    --text-light: #fafafa;
    --text-white: #ffffff;
    --accent-blue: #48a4db;
    --gray-light: #eff0f1;
    --gray-medium: #bdc2c6;
    --gray-dark: #6c757d;
    --background-dark: #08101a;
    --background-light: #fafafa;
    --border-color: #dee2e6;
}

.f-bebas {
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif !important;
}

.f-brixton {
    font-family: Brixton_Lead Vector, Segoe UI, Helvetica Neue, Arial, sans-serif !important;
}

.f-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.category-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: 625px;
    background: #eff0f1;
    justify-content: center;
}

.category-banner-media {
    width: calc(45.5% + 140px);
}

.category-banner-col {
    position: relative;
    z-index: 2;
}

.category-banner-media {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(45.5% + 140px);
    flex: 1 1 auto;
}

.category-banner-media img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
    -webkit-clip-path: polygon(0 0, 100% 0, 39vw 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 39vw 100%, 0 100%);
}


.category-banner span.about {
    font-size: 1rem;
    line-height: 1.625;
    letter-spacing: .5px;
    color: #08101a;
    font-weight: 600;
    word-break: auto-phrase;
    margin-bottom: 16px;
    display: block;
}

.category-banner h1 {
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: .9;
    font-weight: 400;
    color: #08101a;
    margin: 0;
}

.category-banner p {
    font-size: 1rem;
    line-height: 1.625;
    letter-spacing: .5px;
    color: #08101a;
    margin-top: 30px;
    font-weight: 600;
    word-break: auto-phrase;
    margin-bottom: 0;
}


.btn {
    line-height: 1.75rem;
    gap: .375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 7px 24px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    flex-direction: row;
    flex-wrap: wrap;
}

.btn-default-outline {
    background-color: transparent;
    color: #5b6770;
    border: 1px solid rgb(189, 194, 198);
}


/* Features Section */
.features-section {
    padding-top: 160px;
    padding-bottom: 145px;
    background-color: #fafafa;
}

.features-section h5 {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 80px;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .9;
    color: #08101a;
}

.features-section h5 .best-choice {
    color: var(--primary-color);
}

.feature-item {}

.feature-item svg {
    height: 32px;
    margin-bottom: 15px;
    fill: var(--text-dark);
}

.feature-item h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.625;
    margin: 0;
    color: #08101a;
    text-transform: uppercase;
}

.feature-item p {
    font-size: 16px;
    color: #08101a;
    line-height: 1.625;
    letter-spacing: .5px;
    margin-top: 30px;
}

section.highlights-section {
    background: #eff0f1;
    padding-top: 160px;
    padding-bottom: 145px;
    color: #08101a;
}

section.highlights-section h2 {
    font-size: 48px;
    line-height: 43px;
    font-weight: 400;
}

section.highlights-section h4 {
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 30px;
}

section.highlights-section p {
    margin-top: 30px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

section#urunler {}

section#urunler .section-title {
    margin-bottom: 40px;
}

section#urunler .section-title h1 {
    color: #08101a;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-size: 64px;
    line-height: 58px;
    font-weight: 400;
}