/******************************************************************************
* Hack-n-Learn
*
* Template CSS file
*
* @version		1.0
* @package		hacknlearn
* @author		Apostolos Koutsoulelos <info@bitcraft-labs.gr>
* @license		Commercial
* @license url	http://www.bitcraft-labs.gr/licences/commercial.html
* 
* @copyright	Copyright (C) 2026 Apostolos Koutsoulelos. All rights reserved.
*
******************************************************************************/
@charset "UTF-8";

/* ================================ General ================================ */
:root {
	--primary: #01012b;
	--accent: #e63381;
	--card-bg: #0a0a3d;
	--text-dim: #b0b0d1;
	--glow: 0 0 15px rgba(230, 51, 129, 0.6);
}
body {
	background-color: var(--primary);
	color: #ffffff;
	font-family: 'IBM Plex Sans', sans-serif;
	overflow-x: hidden;
}
h1, h2, h3, .navbar-brand {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
}
/* =========================== Custon Navigation =========================== */
.navbar {
	background: rgba(1, 1, 43, 0.9) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(230, 51, 129, 0.2);
}
.navbar-brand span { color: var(--accent); }
.nav-link { 
	color: #fff !important; 
	font-size: 0.85rem; 
	margin-left: 1.5rem;
	transition: 0.3s;
}
.nav-link:hover { color: var(--accent) !important; text-shadow: var(--glow); }
.nav-link .fas { color: var(--accent); font-size: 16px; padding: 6px 2px;}
/* ============================== Hero Section ============================= */
.hero-section {
	padding: 120px 0 80px;
	background: radial-gradient(circle at 80% 20%, #15154d, var(--primary));
}
/* ============================= Cyber Terminal ============================ */
.terminal-window {
	background: #000;
	border-radius: 6px;
	padding: 20px;
	border: 1px solid var(--accent);
	box-shadow: 0 15px 40px rgba(0,0,0,0.6);
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.9rem;
}
.t-magenta { color: var(--accent); }
.t-green { color: #00ff00; }
/* ============================= Cards & Glows ============================= */
.cyber-card {
	background: var(--card-bg);
	border: 1px solid rgba(230, 51, 129, 0.1);
	border-left: 4px solid var(--accent);
	padding: 30px;
	transition: 0.4s;
	height: 100%;
}
.cyber-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--glow);
	background: #0d0d4d;
}
.cyber-card:hover h3 { text-shadow: 0 0 10px var(--accent); }
/* ===================== Feature Sections (Alternating) ==================== */
.feature-row { padding: 100px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.bg-alt { background-color: var(--card-bg); }
.visual-placeholder {
	width: 100%;
	height: 300px;
	background: #000014;
	border: 1px dashed var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	font-weight: bold;
}
/* ================================ Buttons ================================ */
.btn-cyber {
	background: var(--accent);
	color: white;
	border: none;
	border-radius: 0;
	padding: 12px 30px;
	font-family: 'Inter';
	font-weight: 700;
	transition: 0.3s;
}
.btn-cyber:hover {
	background: transparent;
	color: white;
	box-shadow: var(--glow);
	outline: 1px solid var(--accent);
}
/* ================================= Footer ================================ */
footer {
	background: #000014;
	padding: 80px 0 40px;
	border-top: 1px solid var(--border);
}
/* ============================== Contact map ============================== *//*
.map-section {
    overflow: hidden;
    margin-bottom: 60px;
}
#contactMap {
    width: 100%;
    height: 450px;
}
.map {	
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
/* ========================== toTop Button style =========================== */
.progress-wrap {
    position: fixed;
    bottom: 30px;
    right: 20px;
    height: 45px;
    width: 45px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.progress-wrap::after {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    content: "\f077";
	color: var(--accent);
    text-align: center;
    line-height: 45px;
    font-size: 16px;
    font-weight: 900;
    left: 0;
    top: 0;
    height: 45px;
    width: 45px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap svg path {
    fill: none;
}
.progress-wrap svg.progress-circle path {
    stroke:  #ececec;
    stroke-width: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap {
    -webkit-box-shadow: inset 0 0 0 1px #ccc;
    box-shadow: inset 0 0 0 1px  #ccc;
}
.progress-wrap::after {
    color: var(--accent);
}
.progress-wrap svg.progress-circle path {
    stroke: var(--primary);
}
/* ============================= Owl Carousel ============================== */
.hero-section .owl-carousel .item {
	padding: 2px;
	display:flex;
	align-items:center;
}





/* ============================ Elxis CSS Rules ============================ *//*
h2.smap_h2, h2.smap_h2 a, h2.smap_h2 a:visited, h2.smap_h2 a:hover, ul.smap_list li, ul.smap_list li a, ul.smap_list li a:hover, ul.smap_list li a:visited, .smap_pcopy, .smap_atop_main h2, .smap_atop_main div, a.smap_acfg, a.smap_acfg:visited, a.smap_acfg:hover, .smap_aversion, .smap_aversion span, .smap_adevel, .smap_mlrow, .smap_copy a, .smap_copy a:active, .smap_copy a:hover, .smap_copy a:visited, .smap_copy a:link, .smap_copy {
	font-family: 'IBM Plex Sans', sans-serif;
}
ul.smap_list li a span { color: #222220; }
ul.smap_list li { margin: 0 0 5px 0; }
h2.smap_h2 { margin-bottom: 15px; } 
h2.smap_h2 a, ul.smap_list li a { color: #666; }
h2.smap_h2 a:hover, ul.smap_list li a:hover { color: #000; }
a.elxanorobot, a.elxanorobot:visited, a.elxanorobot:active, a.elxanorobot:hover, a.elxanorobot:link { font: normal 14px/30px 'IBM Plex Sans', sans-serif;margin-bottom: 30px }
a.elxanorobot span, a.elxanorobot span.elxnorobotbox{ width: 20px; height:20px; border-width:1px; font:normal 20px/20px 'Font Awesome 5 Free' }
.elx5_success, .elx_notice, .elx_success, .elx5_warning, .elx_warning, .elx5_error, .elx_error { font-family: 'IBM Plex Sans', sans-serif; }
.modulang a { text-transform:uppercase;font-size:14px }
.modulang a::after { position: absolute;  content: '/';  right: -4px;  top: -4px; }
.modulang a:last-child:after { display:none; }

/* ========================================================================= */