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

@media (min-width: 1500px) {

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

main.skil-home {
    -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-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;
}

/* SKIL Home Page Styles */
body.home-page {
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}
header.site-header.home-header {
    position: fixed;}

.video-banner-section::before {
    content: '';
    background: linear-gradient(to right, #08101a, #0000);
    position: absolute;
    inset: 0;
    z-index: 1;
}
.video-banner-section::after {top: 0;width: 31%;content: '';background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' preserveAspectRatio='none' viewBox='0 0 538 1000'%3E%3Cpath fill='%23CB333B' d='M450 0h88v1000H0z'/%3E%3C/svg%3E");position: absolute;right: 0;z-index: 10;height: 100%;background-size: 100% 100%;background-repeat: no-repeat;mix-blend-mode: multiply;}

/* Video Banner Section */
.video-banner-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* background: linear-gradient(135deg, rgba(8, 16, 26, 0.7) 0%, rgba(203, 51, 59, 0.3) 100%); */
}

.video-banner-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.video-banner-content {
    color: var(--text-white);
    z-index: 2;
    max-width: 525px;
    position: relative;
    padding: 80px 0;
}

.video-banner-content h1 {
    font-size: 10rem;
    margin-bottom: 1.5rem;
    line-height: .9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 400;
}

.video-banner-content h1 .power {
    color: var(--primary-color);
}

.video-banner-content p {
    margin-bottom: 35px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-white);
    min-height: unset;
}

.btn-primary:hover {
    background-color: #a82a32;
    color: var(--text-white);
}

.btn-secondary {
    background-color: var(--accent-blue);
    color: var(--text-white);
}

.btn-secondary:hover {
    background-color: var(--text-dark);
    color: var(--text-white);
}

.btn-default-white {
    background-color: transparent;
    color: var(--text-white);
    border: 1px solid var(--text-white);
}

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

.btn-default-outline:hover {
    color: #08101a;
    border-color: #08101a;
}
.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;
}
/* Spotlight Section */
.spotlight-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--background-light);
}

.spotlight-section h2 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.spotlight-section h2 .legendary {
    color: var(--primary-color);
}

.spotlight-section p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--gray-dark);
}

.spotlight-image {
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    display: block;
    text-align: center;
}

.spotlight-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Promo Section */
.promo-section {
    padding-top: 160px;
    padding-bottom: 145px;
}

.promo-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin: 0 auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    align-self: stretch;
}

.promo-image {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.promo-text h2 {
    font-weight: bold;
    font-size: 3rem;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    margin: 25px 0;
    color: #fff;
}

.promo-text p {
    margin-bottom: 2rem;
    color: #fff;
}

/* Demo Section */
.demo-section {
    padding: 160px 0 100px 0;
    background-color: var(--gray-light);
}

.demo-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.demo-text h5 {
    font-size: 4rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    line-height: .9;
    color: #08101a;
}

.demo-text h5 .coolest {
    color: var(--accent-blue);
}

.demo-text h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: #08101a;
    margin-top: 25px;
    line-height: 1.625;
}

.demo-text p {
    margin-bottom: 30px;
    color: #08101a;
    line-height: 1.625;
}

.demo-image {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Showcase Section */
.showcase-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--background-light);
}

.showcase-section img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.showcase-section h2 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.showcase-section h2 .energy {
    color: var(--primary-color);
}

.showcase-section p {
    font-size: 1.125rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    color: var(--gray-dark);
}

/* Gallery Section */
.gallery-section {
    padding-top: 160px;
    padding-bottom: 135px;
    background-color: var(--background-light);
}

.gallery-section .gallery-rest {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}

.gallery-section h5 {
    font-size: 4rem;
    font-weight: 300;
    text-align: center;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    color: #08101a;
    margin-bottom: 30px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
    padding-top: 40px;
    margin-bottom: 30px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    height: 100%;
    width: 100%;
    max-width: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.4,0,1,1);
}

.gallery-item img:hover {
    ;transform: scale(1.1);
}

/* Grid placement */
.gallery-item {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
    /* spans both rows vertically */
    overflow: hidden;
}

.gallery-item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.gallery-item:last-child {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.gallery-description {
    margin: 0 auto;
    padding: 0 45px;
    text-align: center;
}
.gallery-description p {
    color:#08101a;
    text-align: center;
    font-size:16px;
    margin-bottom: 30px;
}

/* Preview Section */
.preview-section {padding-top: 160px;padding-bottom: 135px;background-position: center center;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;}

.preview-section h5 {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 70px;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    line-height: .9;
}

.preview-section h5 .right-tools {
    color: var(--primary-color);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.preview-item {
}

.preview-item img {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.preview-item h2 {
    font-size: 3rem;
    margin-bottom: 25px;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    line-height: .9;
    text-align: left;
    color: #fff;
}

.preview-item h4 {
    font-size: 1.25rem;
    margin-bottom: 0;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
}

.preview-item p {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: left;
    color: #fff;
}

/* Performance Indicators */
.performance-indicators {
    display: flex;
    justify-content: flex-start;
    gap: 0px;
    margin-bottom: 6px;
}

.indicator {
    width: 14px;
    height: 16px;
    background-color: #BDC2C6;
    clip-path: polygon(40% 0%, 100% 0%, 60% 100%, 0% 100%);
    margin-right: -3px;
}

.indicator.active {
    background-color: var(--primary-color);
}

/* 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: 300;
    text-transform: uppercase;
    line-height: .9;
}

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

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.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;
}

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

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, rgba(8, 16, 26, 0.9) 0%, rgba(203, 51, 59, 0.8) 100%);
    padding: 80px 0;
    color: var(--text-white);
}

.newsletter-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.newsletter-content p {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.newsletter-content div {
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
}

.newsletter-form button {
    padding: 12px 24px;
    background-color: var(--text-white);
    color: var(--text-dark);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-form button:hover {
    background-color: var(--gray-light);
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-banner-content h1 {
        font-size: 2.5rem;
    }

    .promo-content, .demo-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .spotlight-section h2, .showcase-section h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .video-banner-content h1 {
        font-size: 2rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .promo-section, .demo-section, .showcase-section, .gallery-section, .preview-section, .features-section, .newsletter-section {
        padding: 60px 0;
    }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-white {
    color: var(--text-white);
}

.text-primary {
    color: var(--primary-color);
}

.text-accent {
    color: var(--accent-blue);
}

.bg-dark {
    background-color: var(--background-dark);
}

.bg-light {
    background-color: var(--background-light);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}