@font-face {

  font-family: "CalSans"; 

  src: url("https://developing.avtodetalner.am/codehub.am/downloads/CalSans-Regular.ttf") format("truetype"); 

  font-style: normal; 

  font-weight: normal; 

} 

@font-face {

  font-family: "BebasNeue"; 

  src: url("https://developing.avtodetalner.am/codehub.am/downloads/BebasNeue-Regular.ttf") format("truetype"); 

  font-style: normal; 

  font-weight: normal; 

} 

@font-face {

  font-family: "Comfortaa"; 

  src: url("https://developing.avtodetalner.am/codehub.am/downloads/Comfortaa.ttf") format("truetype"); 

  font-style: normal; 

  font-weight: normal; 

} 


/* Общие стили скроллбара */

::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}



/* Дорожка скроллбара */

::-webkit-scrollbar-track {

  background: rgba(15, 23, 42, 0.8);

  backdrop-filter: blur(5px);

  border-radius: 4px;

}



/* Ползунок скроллбара */

::-webkit-scrollbar-thumb {

  background: linear-gradient(45deg, #7C3AED, #EC4899);

  border-radius: 5px;

  border: 2px solid rgba(15, 23, 42, 0.3);

  transition: all 0.3s ease;

}



/* Ховер-эффект для ползунка */

::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(45deg, #8B5CF6, #F472B6);

}



/* Стили для Firefox */

* {

  scrollbar-width: thin;

  scrollbar-color: #7C3AED #0F172A;

}





        :root {

            --primary: #7c3aed;

            --primary-light: #8b5cf6;

            --primary-dark: #6d28d9;

            --dark: #0f172a;

            --darker: #020617;

            --light: #e2e8f0;

            --lighter: #f8fafc;

            --gray: #64748b;

            --success: #10b981;

        }



/* ===== New Header Styles ===== */

.new-header {

    background-color: var(--dark);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    border-bottom: 1px solid rgba(100, 116, 139, 0.1);

}



.new-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.new-header-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 70px;

}



.new-logo {

    display: block;

    width: 160px;

    height: 40px;

    background-image: url('https://developing.avtodetalner.am/codehub.am/Assets/img/codehublogowhite.png');

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    text-indent: -9999px;

}



.new-nav-list {

    display: flex;

    gap: 15px;

    list-style: none;

}



.new-nav-link {

    display: flex;

    align-items: center;

    gap: 5px;

    color: var(--text-light);

    text-decoration: none;

    padding: 10px 15px;

    border-radius: 4px;

    transition: all 0.3s ease;

}



.new-nav-link:hover {

    background: rgba(124, 58, 237, 0.1);

    color: var(--accent-color);

}



.new-nav-link .material-icons {

    font-size: 1.2rem;

}



.new-nav-item.active .new-nav-link {

    color: var(--accent-color);

    font-weight: 500;

    position: relative;

    background: rgba(113, 42, 234, 0.62);

}



.new-nav-item.active .new-nav-link::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: 0;

    width: 100%;

    height: 2px;

    background: var(--accent-color);

}



.new-menu-toggle {

    display: none;

    background: none;

    border: none;

    color: var(--text-light);

    font-size: 1.5rem;

    cursor: pointer;

}



/* Добавим специфичные стили для страницы Kamurj */

        .kamurj-hero {

            position: relative;

            height: 100vh;

            min-height: 800px;

            display: flex;

            align-items: center;

            background: linear-gradient(135deg, var(--primary), var(--primary-dark));

            overflow: hidden;

            padding-top: 80px;

        }

        

        .kamurj-hero::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: url('https://media1.thehungryjpeg.com/thumbs2/ori_3492755_618863b3d75829e07b84fbe97113bb2324fa7f43_blue-waves-pattern-summer-lake-wave-water-flow-abstract-vector-seaml.jpg') repeat;

            opacity: 0.1;

            z-index: 1;

        }

        

        .kamurj-hero-content {

            position: relative;

            z-index: 2;

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 2rem;

            text-align: center;

        }

        

        .kamurj-hero h1 {

            font-size: 4.5rem;

            margin-bottom: 1.5rem;

            line-height: 1.1;

            background: linear-gradient(to right, var(--lighter), white);

            -webkit-background-clip: text;

            background-clip: text;

            color: transparent;

        }

        

        .kamurj-hero p {

            font-size: 1.5rem;

            color: rgba(255, 255, 255, 0.9);

            margin-bottom: 3rem;

            max-width: 800px;

            margin-left: auto;

            margin-right: auto;

        }

        

        .kamurj-bridge-icon {

            width: 120px;

            height: 120px;

            margin: 0 auto 2rem;

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

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            border: 3px solid rgba(255, 255, 255, 0.2);

        }

        

        .kamurj-bridge-icon .material-icons {

            font-size: 4rem;

            color: white;

        }

        

        /* Features Section */

        .kamurj-features {

            padding: 6rem 0;

            background: var(--darker);

            position: relative;

        }

        

        .kamurj-feature-card {

            background: rgba(15, 23, 42, 0.8);

            border-radius: 1rem;

            padding: 2.5rem;

            border: 1px solid rgba(124, 58, 237, 0.2);

            transition: all 0.4s ease;

            height: 100%;

        }

        

        .kamurj-feature-card:hover {

            transform: translateY(-10px);

            border-color: var(--primary);

            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

        }

        

        .kamurj-feature-icon {

            width: 60px;

            height: 60px;

            background: linear-gradient(135deg, var(--primary), var(--primary-dark));

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 1.5rem;

            color: white;

            font-size: 1.8rem;

        }

        

        /* Code Example Section */

        .kamurj-code-section {

            background: linear-gradient(to right, var(--dark), var(--darker));

            padding: 6rem 0;

        }

        

        .kamurj-code-block {

            background: rgba(2, 6, 23, 0.8);

            border-radius: 0.5rem;

            padding: 2rem;

            border-left: 4px solid var(--primary);

            overflow-x: auto;

        }

        

        /* Bridge Animation */

        .bridge-animation {

            position: relative;

            height: 300px;

            margin: 3rem auto;

            max-width: 800px;

        }

        

        .bridge-path {

            position: absolute;

            top: 50%;

            left: 0;

            width: 100%;

            height: 2px;

            background: linear-gradient(to right, 

                transparent, 

                var(--primary-light), 

                var(--primary), 

                var(--primary-light), 

                transparent);

            transform: translateY(-50%);

        }

        

        .bridge-node {

            position: absolute;

            width: 12px;

            height: 12px;

            background: white;

            border-radius: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.5);

            animation: bridgePulse 2s infinite;

        }

        

        @keyframes bridgePulse {

            0%, 100% {

                box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.5);

            }

            50% {

                box-shadow: 0 0 0 8px rgba(124, 58, 237, 0);

            }

        }









@media (max-width: 992px) {

    .about-grid {

        grid-template-columns: 1fr;

    }

    

    .about-image {

        order: -1;

        max-width: 80%;

        margin: 0 auto;

    }

    

    .about-image .image-container {

        height: 300px;

    }

}



/* Responsive Styles */

@media (max-width: 768px) {

    .new-menu-toggle {

        display: block;

    }

    

    .new-nav {

        position: fixed;

        top: 50px;

        left: 0;

        width: 100%;

        background: var(--dark);

        padding: 20px;

        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

        transform: translateY(-150%);

        opacity: 0;

        transition: all 0.3s ease;

        z-index: 950;

    }

    

    .new-nav.active {

        transform: translateY(0);

        opacity: 1;

    }

    

    .new-nav-list {

        flex-direction: column;

        gap: 10px;

    }

    

    .new-nav-item.active .new-nav-link::after {

        bottom: 0;

        left: -20px;

        width: 3px;

        height: 100%;

    }

     .kamurj-hero h1 {

                font-size: 3rem;

            }

            

            .kamurj-hero p {

                font-size: 1.2rem;

            }

            

            .kamurj-bridge-icon {

                width: 80px;

                height: 80px;

            }

            

            .kamurj-bridge-icon .material-icons {

                font-size: 2.5rem;

            }

        }

    




@media (max-width: 480px) {

    .new-logo {

        width: 120px;

    }

    

    .new-header-inner {

        height: 60px;

    }

     .kamurj-hero h1 {

                font-size: 2.5rem;

            }

    

}