:root { 
		--orange: #F9961F; 
		--orange2: #dd831c; 
		--orange3: #f2a854; 
		--blue: #15232E;
	}
	


	.bg-blue{ background-color:var(--blue); }
	.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    margin-left: 8px;

    border-radius: 50%;
    background: #333; /* circle background */

    color: #fff;
    font-size: 18px;

    text-decoration: none;

    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
}

/* fade-in animation */
.social-icons a {
    animation: fadeInUp 0.5s ease forwards;
}

/* stagger effect */
.social-icons a:nth-child(1) { animation-delay: 0.1s; }
.social-icons a:nth-child(2) { animation-delay: 0.2s; }
.social-icons a:nth-child(3) { animation-delay: 0.3s; }
.social-icons a:nth-child(4) { animation-delay: 0.4s; }
.social-icons a:nth-child(5) { animation-delay: 0.5s; }
.social-icons a:nth-child(6) { animation-delay: 0.6s; }
.social-icons a:nth-child(7) { animation-delay: 0.7s; }
.social-icons a:nth-child(8) { animation-delay: 0.8s; }
.social-icons a:nth-child(9) { animation-delay: 0.9s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* hover effect */
.social-icons a:hover {
    background: var(--orange); /* your orange */
    transform: translateY(-3px);
}
	
	/* optional: slightly different default for toggle */
#themeToggle {
    background: #333;
}

/* optional: highlight on hover */
#themeToggle:hover {
    background: #ff6a00;
}
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.text-orange,a.text-orange,button.text-orange{ color: var(--orange); }
a.text-orange:hover,button.text-orange:hover{ color: var(--orange2); }
a.text-orange.active,button.text-orange.active{ color: var(--orange3); }
	
	
[data-bs-theme="light"] .text-orange,[data-bs-theme="light"] a.text-orange,[data-bs-theme="light"] button.text-orange{ color: var(--blue); }
[data-bs-theme="light"] a.text-orange:hover,[data-bs-theme="light"] button.text-orange:hover{ color: var(--blue); }
[data-bs-theme="light"] a.text-orange.active,[data-bs-theme="light"] button.text-orange.active{ color: var(--blue); }

[data-bs-theme="dark"]  a:not(.btn){
   color: var(--bs-light);
}

[data-bs-theme="light"] a:not(.btn){
    color: #000;
}

[data-bs-theme="light"] .bg-blue a:not(.btn),[data-bs-theme="light"] footer a:not(.btn){
    color: #FFF;
}
.gif-play-icon {
	background: rgba(0,0,0,0.6);
	color: #fff;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 14px;
	pointer-events: none;
}



.hero-section {
    min-height: 500px;
    background-image: url('/images/helmet-background.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}

/* Mobile fix */
@media (max-width: 1300px) {
	 .hero-section {
        min-height: 600px;
		background-size:1000px;
    }
}
@media (max-width: 768px) {
    .hero-section {
        min-height: 700px;
		background-size:800px;
    }
}

@media (max-width: 768px) {
    .social-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        justify-items: center;
    }

    .social-icons a {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
}