/* SquintPro Landing Page - Custom CSS */

/* ===== Font Face Declarations ===== */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrains/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrains/JetBrainsMono-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrains/JetBrainsMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono NL';
    src: url('../fonts/JetBrains/JetBrainsMonoNL-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono NL';
    src: url('../fonts/JetBrains/JetBrainsMonoNL-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ===== Variables ===== */
:root {
    /* Color Palette - Enterprise Security Schema */
    --oxford-blue: #14213D;
    --emerald-green: #00A878;
    --selective-yellow: #FFB703;
    --eerie-black: #1A1A1A;
    --cultured: #F5F5F5;
    
    /* Original Colors - Kept for Reference */
    --red: #e81500;
    --orange: #f76400;
    --yellow: var(--selective-yellow);
    --green: var(--emerald-green);
    --teal: #00ba94;
    --cyan: #00cfd5;
    --blue: #0061f2;
    --indigo: #5800e8;
    --purple: #4F058C;
    --pink: #e30059;
    --stc-second: #FF375E;
    
    /* Grayscale */
    --white: #fff;
    --gray-100: var(--cultured);
    --gray-200: #E5E5E5;
    --gray-300: #D4D4D4;
    --gray-400: #BCBCBC;
    --gray-500: #9A9A9A;
    --gray-600: #717171;
    --gray-700: #505050;
    --gray-800: #333333;
    --gray-900: var(--eerie-black);
    --black: #000;
    
    /* Main Colors */
    --primary: var(--oxford-blue);       /* Oxford Blue */
    --secondary: var(--emerald-green);   /* Emerald Green */
    --success: var(--emerald-green);     /* Emerald Green */
    --info: var(--cyan);                 /* Cyan */
    --warning: var(--selective-yellow);  /* Selective Yellow */
    --danger: var(--red);                /* Red */
    --dark: var(--eerie-black);          /* Eerie Black */
    --light: var(--cultured);            /* Cultured */
    --accent: var(--selective-yellow);   /* Selective Yellow */
    
    /* Social Media */
    --facebook: #3b5998;
    --twitter: #1da1f2;
    --github: #333333;
    --google: #ea4335;
    
    /* Typography */
    --logo-font: 'JetBrains Mono', monospace;
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Roboto', sans-serif;
    
    /* Spacing */
    --section-padding: 5rem 0;
}

/* ===== Base Styles ===== */
body {
    font-family: var(--body-font);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 700;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--secondary);
}

.section-title {
    font-weight: 700;
    margin-bottom: 2rem;
    position: relative;
    color: var(--primary);
}

.section-title:after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--secondary);
    margin: 0.5rem auto 0;
}

.text-center .section-title:after {
    margin-left: auto;
    margin-right: auto;
}

.btn {
    font-family: var(--heading-font);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #E5A400; /* Darker shade of accent (Selective Yellow) */
    border-color: #E5A400;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.bg-primary {
    background-color: var(--primary) !important;
}

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

/* ===== Header & Navigation ===== */
header {
    transition: all 0.3s ease;
}

.navbar {
    padding: 1rem 0;
    background-color: var(--primary);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    padding: 0.5rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: var(--primary);
}

.navbar-brand img {
    transition: all 0.3s ease;
}

.logo-text {
    font-family: var(--logo-font);
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--white);
    position: relative;
}

.logo-text:after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background: var(--accent);
    margin-top: 2px;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--white);
    font-family: var(--heading-font);
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--accent);
}

/* ===== Hero Section ===== */
#hero {
    background: linear-gradient(rgba(20, 33, 61, 0.9), rgba(20, 33, 61, 0.8)), url('../videos/intro.gif');
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 10rem 0 5rem;
    position: relative;
}

#hero h1 {
    font-weight: 800;
    margin-bottom: 1.5rem;
}

/* Typed.js cursor styling */
.typed-cursor {
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 1;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.hero-cta {
    margin-top: 2rem;
}

.hero-image {
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
}

.hero-image:hover {
    transform: translateY(-10px);
}

/* ===== Problem Statement ===== */
#problem {
    padding: var(--section-padding);
}

.problem-card {
    padding: 2rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--primary);
}

/* ===== Product Introduction ===== */
#product {
    padding: var(--section-padding);
}

.product-demo {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.demo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* Make visible by default */
    transition: all 0.3s ease;
}

/* Add a pulsating animation to the play button to draw attention */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.play-btn {
    animation: pulse 2s infinite ease-in-out;
}

.play-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}
.play-btn:hover {
    transform: scale(1.1);
    background-color: var(--primary);
    color: var(--white);
}

/* Video Expand Button */
.expand-video-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-demo:hover .expand-video-btn {
    opacity: 1;
}

.expand-video-btn a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.expand-video-btn a:hover {
    background-color: var(--accent);
    color: var(--primary);
    transform: scale(1.1);
}

/* ===== Key Features ===== */
#features {
    padding: var(--section-padding);
}

.feature-card {
    padding: 2rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.feature-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--primary);
    opacity: 0.05;
    transition: all 0.3s ease;
    z-index: -1;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-card:hover:before {
    height: 100%;
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--secondary);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    background-color: var(--secondary);
    color: var(--white);
}

/* ===== Results & Statistics ===== */
#results {
    padding: var(--section-padding);
}

.stat-card {
    padding: 2rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--heading-font);
    display: inline-block;
}

.stat-symbol {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--heading-font);
    display: inline-block;
}

/* ===== Trusted By Section ===== */
#trusted-by {
    background-color: var(--dark);
    overflow: hidden;
    position: relative;
}

#trusted-by .section-title {
    color: var(--white);
}

#trusted-by .section-title:after {
    margin-left: auto;
    margin-right: auto;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.marquee-content {
    display: flex;
    align-items: center;
    animation: marquee 60s linear infinite;
    width: max-content; /* Ensures the container is as wide as needed */
}

.trusted-logo {
    height: 50px;
    margin: 0 30px;
    filter: brightness(0) invert(1); /* Makes dark logos white */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.trusted-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Move by half the width to create seamless loop */
    }
}

/* ===== SquintPro Advantage ===== */
#advantage {
    padding: var(--section-padding);
}

.advantage-card {
    padding: 2rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
}

.advantage-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.advantage-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--white);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-icon {
    background-color: var(--secondary);
}

/* ===== Industry Applications ===== */
#industries {
    padding: var(--section-padding);
}

.industry-card {
    padding: 2rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.industry-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--primary);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.industry-details {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
}

.industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.industry-card:hover .industry-icon {
    background-color: var(--primary);
    color: var(--white);
}

.industry-card:hover .industry-details {
    max-height: 200px;
    opacity: 1;
    margin-top: 1rem;
}

/* ===== Partnerships & OEM ===== */
#partnerships {
    padding: var(--section-padding);
}

.partnership-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}

.partnership-list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.partnership-list li i {
    color: var(--secondary);
    margin-right: 0.5rem;
}

.partnership-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* ===== Security Features ===== */
#security {
    padding: var(--section-padding);
}

.security-card {
    padding: 2rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
}

.security-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.security-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--white);
    font-size: 2rem;
    transition: all 0.3s ease;
}

.security-card:hover .security-icon {
    background-color: var(--secondary);
}

.security-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.security-badge {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.security-badge:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ===== About SquintPro ===== */
#about {
    padding: var(--section-padding);
}

.about-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* ===== Call to Action ===== */
#demo {
    padding: var(--section-padding);
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ===== Footer ===== */
footer {
    padding: 5rem 0 3rem;
}

footer h5 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

footer ul li {
    margin-bottom: 0.75rem;
}

footer a {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

footer a:hover {
    color: var(--secondary);
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: var(--secondary);
    color: var(--white);
    transform: translateY(-3px);
}

/* ===== Animations ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease forwards;
}

/* ===== Responsive Styles ===== */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--primary);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 0.5rem;
    }
    
    #hero {
        padding: 8rem 0 4rem;
        text-align: center;
    }
    
    .hero-image {
        margin-top: 3rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        margin-bottom: 1rem;
        width: 100%;
        max-width: 300px;
    }
    
    .trusted-logo {
        height: 45px;
        margin: 0 25px;
    }
    
    .marquee-content {
        animation-duration: 50s; /* Slightly faster on medium screens */
    }
}

@media (max-width: 767.98px) {
    #hero h1 {
        font-size: 2.5rem;
    }
    
    .stat-number, .stat-symbol {
        font-size: 2.5rem;
    }
    
    .security-badges {
        gap: 1rem;
    }
    
    .security-badge {
        max-width: 100px;
    }
    
    .trusted-logo {
        height: 40px;
        margin: 0 20px;
    }
    
    .marquee-content {
        animation-duration: 40s; /* Faster on small screens */
    }
}

@media (max-width: 575.98px) {
    .section-title {
        font-size: 1.75rem;
    }
    
    #hero h1 {
        font-size: 2rem;
    }
    
    .problem-card, .feature-card, .advantage-card, .industry-card, .security-card {
        padding: 1.5rem;
    }
    
    .trusted-logo {
        height: 30px;
        margin: 0 15px;
    }
    
    .marquee-content {
        animation-duration: 30s; /* Even faster on extra small screens */
    }
}