/* 1. FONT DEFINITION */



@font-face {



    font-family: 'TacOne';



    src: url('../fonts/TacOne-Regular.woff2') format('woff2'); /* Note the ../ to go up one folder */



    font-weight: normal; font-style: normal; font-display: swap;



}







/* 2. VARIABLES */



:root {



    --bg: #0D101F;



    --bg-soft: #14182a;



    --card-border: rgba(255,255,255,0.10);



    --text: #ffffff;



    --muted: #aab2d5;



    --accent: #FF2931;



    --accent-warm: #FF2931;



    --highlight: #FFE71D;



    --radius: 24px;



    --container: 1180px;



    --mobile-gap: 40px;



}







/* 3. GLOBAL STYLES */



* { box-sizing: border-box; }



html { scroll-behavior: smooth; }



body {



    margin: 0;



    font-family: 'Inter', Arial, sans-serif;



    color: var(--text);



    background: var(--bg);



    min-height: 100vh;



}



a { color: inherit; text-decoration: none; }



.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }







/* 4. HEADER */



.topbar {



    position: sticky; top: 0; z-index: 100;



    backdrop-filter: blur(16px);



    background: rgba(13,16,31,0.85);



    border-bottom: 1px solid rgba(255,255,255,0.06);



}



.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }



.brand { display: flex; align-items: center; gap: 12px; font-family: 'TacOne', sans-serif; font-size: 25px; }



.brand-mark { height: 50px; }



.brand-mark img { height: 100%; width: auto; }



.actions { display: flex; align-items: center; gap: 20px; }



.auth-buttons { display: flex; gap: 12px; }







.lang-switcher a, .btn, .ghost-btn {



    border: 1px solid rgba(255,255,255,0.12);



    background: rgba(255,255,255,0.04);



    color: var(--text);



    padding: 10px 16px;



    border-radius: 999px;



    transition: 0.25s ease;



    font-weight: 600; font-size: 10px;



}



.btn { background: linear-gradient(135deg, var(--accent), var(--accent-warm)); border: none; }



.lang-switcher a.active { border-color: var(--accent); background: rgba(255,41,49,0.1); }







/* 5. FULL WIDTH SLIDER */



.hero-full-slider {

    width: 100%;

    /* Use min-height instead of fixed height */

    min-height: 400px; 

    height: 70vh; /* Takes up 70% of the viewport height */

    min-height: 450px; /* Prevents it from getting too squashed */

    background: var(--bg-soft);

    border-bottom: 1px solid var(--card-border);

}







.slider-container {



    width: 100%;



    height: relative;



    position: relative;



    overflow: hidden;



}







.slider-wrapper {



    display: flex;



    height: 100%;



    overflow-x: auto;



    scroll-snap-type: x mandatory;



    scrollbar-width: none; /* Hides scrollbar on Firefox */



}







.slider-wrapper::-webkit-scrollbar {



    display: none; /* Hides scrollbar on Chrome/Safari */



}







.slide {



    flex: 0 0 100%; /* Each slide is exactly 100% of the screen width */



    height: 100%;



    scroll-snap-align: start;



    position: relative;



    display: flex;



    align-items: center;



}







.slide-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    /* This ensures the center of the image is always visible */

    object-position: center; 

    opacity: 0.8;

    z-index: 1;

}







.slide-content {



    position: relative;



    z-index: 2;



    max-width: 600px;



}







.slide-content h2 {



    font-size: clamp(35px, 6vw, 60px);



    margin-bottom: 20px;



    line-height: 1.1;



}







/* Dots Navigation */



.slider-nav {



    position: absolute;



    bottom: 30px;



    left: 50%;



    transform: translateX(-50%);



    display: flex;



    gap: 15px;



    z-index: 10;



}







.slider-nav a {



    width: 12px;



    height: 12px;



    background: rgba(255,255,255,0.3);



    border-radius: 50%;



    transition: 0.3s;



}







.slider-nav a:hover {



    background: var(--accent);



}







/* 6. CARDS & SECTIONS */



.hero { padding: 60px 0; }



.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: center; }



.hero-card { background: #222a34; padding: 40px; border-radius: var(--radius); border: 1px solid var(--card-border); }



h1 { font-size: clamp(32px, 4vw, 54px); line-height: 1.1; }



.badge { display: inline-block; padding: 6px 12px; background: rgba(255,120,130,0.1); border-radius: 20px; color: var(--highlight); font-size: 13px; margin-bottom: 20px; }







.stats { display: grid; gap: 15px; }



.panel { background: #222a34; padding: 25px; border-radius: var(--radius); border: 1px solid var(--card-border); }



.panel strong { display: block; font-size: 32px; margin-top: 10px; color: var(--accent); }







.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }



.brand-card { background: #222a34; padding: 30px; border-radius: var(--radius); border: 1px solid var(--card-border); text-align: center; transition: 0.3s; opacity: 1; }



.brand-card:hover { transform: translateY(-5px); border-color: var(--accent); }



.brand-logo-container { height: 60px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }



.brand-logo-container img { max-height: 100%; max-width: 200px; }







.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }



.feature-card { background: #222a34; padding: 30px; border-radius: var(--radius); border: 1px solid var(--card-border); }







.contact-card { 
    max-width: 600px; 
    margin: 0 auto; 
    background: #222a34; 
    padding: 40px; 
    border-radius: var(--radius); 
    text-align: center; }



.contact-link { 
    background: rgba(255,255,255,0.05); 
    padding: 15px; 
    border-radius: 15px; 
    display: flex; 
    justify-content: space-between; 
    margin-top: 10px; }

/* Icon-specific coloring */
.contact-links .telegram i {
    color: #6264A7 !important;
}

.contact-links .teams i {
    color: #26A5E4 !important; 
}

.contact-links .mail i {
    color: #FF2931 !important;
}





footer { text-align: center; padding: 60px 0; color: var(--muted); border-top: 1px solid var(--card-border); }







@media (max-width: 900px) {



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



    .topbar-inner { flex-direction: column; gap: 15px; }



    .hero-split-section { height: auto; }



    .slider-wrapper { height: 400px; }



    .video-container { height: 300px; }



}







/* MOBILE STYLES (Phones) */



@media (max-width: 600px) {



    .hero-full-slider {



        height: 30vh; /* Shorter on mobile to keep content in view */

        min-height: 350px;

    }



 





    .slide-content h2 {



        font-size: 28px; /* Shrink the title so it fits better on small screens */



    }



    



    .slide-content p {



        font-size: 14px;



    }



    



    .hero, 



    .container {



        padding-top: var(--mobile-gap) !important;



        padding-bottom: 0 !important;



        margin-bottom: 0 !important;



    }







    /* Standardize the space before the titles */



    h2 {



        margin-top: 0;



        margin-bottom: 20px !important;



    }







    /* Fix specifically for the gap between the Hero Stats and Brands */



    .hero {



        padding-bottom: var(--mobile-gap) !important;



    }



}







.counter {



    font-size: 3rem;



    font-weight: 800;



    color: #ffcc00; /* Use your IMH brand gold/accent color */



    font-variant-numeric: tabular-nums; /* Prevents text jumping/shaking during count */



    margin-bottom: 0.5rem;



    display: block;



}







.stat-card {



    text-align: center;



    padding: 20px;



}







/* Desktop Spacing */



.section-spacing {



    padding: 80px 0;



}







/* Mobile Spacing */



@media (max-width: 600px) {



    .section-spacing {



        padding: var(--mobile-gap) 0 !important;



    }



}