@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css");
:root {
--color1: #f4e022;
--color2: #5a37c3;
--color3: #18224b;
--color4: #de1b4a;
}
.pricelist_pdf {
padding: 10px 20px !important;
background-color: #f00;
color: #fff !important;
border: 0;
border-radius: 10px;
font-weight: bold;
display: inline-block;
}
a {
text-decoration: none !important;
}
li {
list-style-type: none !important;
}
.copyrightbg {
background-color: #a22727 !important;
}
.heading1 {
font-size: 2.5rem;
}
.heading2 {
font-size: 2rem;
}
.heading3 {
font-size: 1.75rem;
}
.heading4 {
font-size: 1.5rem;
}
.heading5 {
font-size: 1.25rem;
}
.heading6 {
font-size: 1rem;
}
.pad {
padding: 90px 0;
}
.wrdbrk {
white-space: pre;
}
.fullpad {
padding: 0 !important;
margin: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold !important;
font-family: Arial, sans-serif !important;
}
body,
p,
a,
li,
span,
button {
font-family: Helvetica, sans-serif !important;
font-weight: normal !important;
}
/* custom css starts */
/* fire-header.css - With Responsive Star Effects */
/* marquee bar */
.sparkle-header-topbar {
background-color: var(--color1);
color: #000000;
position: relative;
overflow: hidden;
z-index: 1031;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.sparkle-header-topbar .marquee-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.fire-header-section {
background-color: var(--color3);
font-family: inherit;
position: relative;
overflow: hidden;
}
/* Top Bar */
.fire-header-section .fire-header-topbar {
background: linear-gradient(90deg,
var(--color4),
var(--color2),
var(--color4));
color: white;
font-weight: 600;
}
.fire-header-section .fire-header-contact i {
margin-right: 8px;
color: var(--color1);
}
/* Logo with Star Effect */
.fire-header-section .fire-header-logo-wrapper {
position: relative;
display: block;
width: 50px;
}
.fire-header-section .fire-header-logo {
height: 50px;
position: relative;
z-index: 2;
}
.fire-header-section .fire-header-logo-sparkle {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
var(--color1) 0%,
rgba(244, 224, 34, 0) 70%);
clip-path: polygon(50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
.fire-header-section .fire-header-brand:hover .fire-header-logo-sparkle {
opacity: 0.6;
animation: sparklePulse 2s infinite alternate;
}
/* Navigation with Star Hover Effects */
.fire-header-section .fire-header-nav {
background-color: var(--color3);
}
.fire-header-section .fire-header-nav-list {
position: relative;
}
.fire-header-section .fire-header-nav-item {
position: relative;
margin: 0 5px;
}
.fire-header-section .fire-header-nav-item .nav-link {
color: white !important;
font-weight: 600;
padding: 10px 20px !important;
position: relative;
display: block;
overflow: hidden;
z-index: 1;
}
.fire-header-section .fire-header-nav-sparkle {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -50%) scale(0);
background: radial-gradient(circle,
var(--color1) 0%,
rgba(244, 224, 34, 0) 70%);
clip-path: polygon(50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%);
opacity: 0;
transition: all 0.3s ease;
z-index: -1;
}
.fire-header-section .fire-header-nav-item .nav-link:hover .fire-header-nav-sparkle,
.fire-header-section .fire-header-nav-item .nav-link.active .fire-header-nav-sparkle {
opacity: 0.4;
transform: translate(-50%, -50%) scale(1.5);
}
.fire-header-section .fire-header-nav-item .nav-link span {
position: relative;
z-index: 2;
}
.fire-header-section .fire-header-nav-item .nav-link:hover,
.fire-header-section .fire-header-nav-item .nav-link.active {
color: var(--color1) !important;
}
/* Animations */
@keyframes sparklePulse {
0% {
transform: translate(-50%, -50%) scale(0.9);
}
100% {
transform: translate(-50%, -50%) scale(1.1);
}
}
/* Navbar Container */
/* index page starts */
.vertical-swiper-section {
background-color: var(--color3);
touch-action: pan-y;
}
.vertical-swiper-container {
width: 100%;
height: 600px;
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.vertical-swiper-wrapper {
width: 100%;
height: 100%;
position: relative;
will-change: transform;
}
.vertical-swiper-slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease;
transform: translateY(20px);
display: flex;
align-items: center;
justify-content: center;
touch-action: pan-y;
}
.vertical-swiper-slide.active {
opacity: 1;
transform: translateY(0);
z-index: 1;
}
.vertical-swiper-slide.fade-out {
opacity: 0;
transform: translateY(-20px);
}
.vertical-swiper-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
}
/* index hero section */
/* Keyframes */
@keyframes floatPulse {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes glowShine {
0% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.15);
}
100% {
opacity: 0.2;
transform: scale(1);
}
}
@keyframes textGlint {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
/* Keyframes */
@keyframes flameFlicker {
0% {
transform: rotate(0deg) scale(1);
transform: scale(1.5);
}
50% {
transform: rotate(2deg) scale(1.05);
transform: scale(1.7);
}
100% {
transform: rotate(-1deg) scale(1);
transform: scale(2);
}
}
@keyframes shimmerText {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
@keyframes floatFade {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* White Hero Section */
.home-hero {
background-color: #fff;
position: relative;
overflow: hidden;
padding: 7rem 1.5rem 6rem;
text-align: center;
z-index: 1;
}
/* Decorative ::before/::after sparks */
.home-hero::before,
.home-hero::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.08;
pointer-events: none;
transition: opacity 0.3s ease;
}
.home-hero::before {
background-image: url("../images/spark-yellow.svg");
top: 10%;
left: 5%;
}
.home-hero::after {
background-image: url("../images/spark-red.svg");
bottom: 10%;
right: 5%;
}
.home-hero:hover::before,
.home-hero:hover::after {
opacity: 1;
}
/* Hero Image Style */
.home-hero .hero-image {
transform: translateY(-50%) rotate(-6deg);
width: 40%;
max-width: 800px;
animation: flameFlicker 6s infinite ease-in-out alternate;
}
.home-hero .hero-image img {
width: 100%;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}
/* Content Area */
.home-hero .hero-inner {
position: relative;
z-index: 2;
text-align: left;
}
.home-hero .hero-badge {
display: inline-block;
font-size: 1rem;
font-weight: 600;
background-color: var(--color1);
color: var(--color3);
padding: 0.4rem 1rem;
border-radius: 30px;
margin-bottom: 1.2rem;
}
.home-hero .hero-title {
font-size: 25px;
font-weight: 800;
color: var(--color3);
}
.home-hero .hero-highlight {
font-size: 60px;
background: linear-gradient(to right,
var(--color2),
var(--color4),
var(--color1));
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
animation: shimmerText 4s linear infinite;
}
.home-hero .hero-subtext {
font-size: 16px;
color: #444;
margin: 1rem 0 2rem;
}
/* CTA Button */
.home-hero .hero-cta-btn {
font-weight: 700;
padding: 0.75rem 2rem;
border-radius: 2rem;
box-shadow: 0 0 0 var(--color1);
transition: all 0.3s ease;
}
.home-hero .hero-cta-btn:hover {
background-color: var(--color1);
color: var(--color3);
transform: scale(1.05);
box-shadow: 0 0 12px var(--color1);
}
/* index products */
.home-products {
background-color: var(--color3);
position: relative;
color: #fff;
}
.home-products .product-heading {
font-size: 2.7rem;
font-weight: 800;
color: var(--color1);
}
.home-products .product-subheading {
font-size: 1.2rem;
color: #ccc;
margin-top: 0.5rem;
}
.home-products .product-tile {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 2.5rem 1.5rem;
text-align: center;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
transition: transform 0.3s ease;
will-change: transform;
perspective: 800px;
/* Optional: add 3D perspective to enhance depth */
height: 18em;
}
.home-products .product-tile::before,
.home-products .product-tile::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.05;
pointer-events: none;
}
.home-products .product-tile::before {
background-image: url("../images/spark-yellow.svg");
top: -20px;
left: -20px;
}
.home-products .product-tile::after {
background-image: url("../images/spark-red.svg");
bottom: -20px;
right: -20px;
}
.home-products .product-tile:hover {
background-color: rgba(255, 255, 255, 0.08);
transform: translateY(-5px) scale(1.03);
box-shadow: 0 0 20px rgba(244, 224, 34, 0.2);
}
.home-products .product-icon i {
font-size: 2.8rem;
color: var(--color1);
margin-bottom: 1rem;
}
.home-products .product-name {
font-size: 1.4rem;
font-weight: 600;
color: #fff;
}
.home-products .product-desc {
font-size: 0.95rem;
color: #bbb;
margin-top: 0.5rem;
}
.home-products .parallax-btn {
background-color: var(--color4);
color: white;
font-weight: 700;
letter-spacing: 1px;
border: none;
padding: 12px 30px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
z-index: 1;
margin: 1em auto;
margin-bottom: 0.5em;
}
.home-products .parallax-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--color2);
transition: all 0.4s ease;
z-index: -1;
}
.home-products .parallax-btn::after {
content: "";
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: var(--color1);
transition: all 0.4s ease 0.2s;
z-index: -1;
}
.home-products .parallax-btn:hover {
color: var(--color3);
transform: translateY(-3px);
}
.home-products .parallax-btn:hover::before {
left: 0;
}
.home-products .parallax-btn:hover::after {
right: 0;
}
/* index counter */
.home-counter {
background-color: #fff;
}
.home-counter .home-counter-title {
font-size: 2.5rem;
color: var(--color3);
font-weight: 700;
}
.home-counter .home-counter-desc {
font-size: 1.125rem;
color: var(--color4);
}
.home-counter .counter-box {
background-color: #f9f9f9;
border-radius: 16px;
padding: 2rem;
position: relative;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
cursor: pointer;
z-index: 1;
}
.home-counter .counter-box::before,
.home-counter .counter-box::after {
content: "";
position: absolute;
border-radius: 50%;
z-index: 0;
}
.home-counter .counter-box::before {
width: 100px;
height: 100px;
background: radial-gradient(circle, var(--color1), transparent 70%);
top: -20px;
left: -20px;
opacity: 0.2;
animation: pulseGlow 5s infinite;
}
.home-counter .counter-box::after {
width: 60px;
height: 60px;
background: radial-gradient(circle, var(--color4), transparent 70%);
bottom: -15px;
right: -15px;
opacity: 0.2;
animation: trailSpark 4s infinite;
}
.home-counter .counter-box:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.home-counter .counter-box:hover::before {
opacity: 0.3;
}
.home-counter .counter-box:hover::after {
opacity: 0.3;
}
.home-counter .counter-icon {
font-size: 2.5rem;
color: var(--color2);
margin-bottom: 1rem;
z-index: 1;
position: relative;
}
.home-counter .counter-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--color3);
margin-bottom: 0.5rem;
z-index: 1;
position: relative;
}
.home-counter .counter-label {
font-size: 1.1rem;
color: var(--color4);
z-index: 1;
position: relative;
}
@keyframes pulseGlow {
0%,
100% {
transform: scale(1);
opacity: 0.2;
}
50% {
transform: scale(1.5);
opacity: 0.05;
}
}
@keyframes trailSpark {
0% {
transform: scale(0.9) rotate(0deg);
}
50% {
transform: scale(1.2) rotate(45deg);
}
100% {
transform: scale(0.9) rotate(0deg);
}
}
/* index parallax */
/* Parallax Section - Desktop First */
.parallax-section {
background: linear-gradient(rgba(24, 34, 75, 0.8), rgba(24, 34, 75, 0.8)),
url("../images/index-parallax-bg.webp") no-repeat center center;
background-size: cover;
background-attachment: fixed;
/* min-height: 500px; */
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.parallax-section .parallax-content {
position: relative;
z-index: 2;
}
.parallax-section .parallax-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color1);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.parallax-section .parallax-text {
font-size: 1.25rem;
line-height: 1.6;
color: #fff;
max-width: 90%;
}
.parallax-section .parallax-btn {
background-color: var(--color4);
color: white;
font-weight: 700;
letter-spacing: 1px;
border: none;
padding: 12px 30px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
z-index: 1;
}
.parallax-section .parallax-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--color2);
transition: all 0.4s ease;
z-index: -1;
}
.parallax-section .parallax-btn::after {
content: "";
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: var(--color1);
transition: all 0.4s ease 0.2s;
z-index: -1;
}
.parallax-section .parallax-btn:hover {
color: var(--color3);
transform: translateY(-3px);
}
.parallax-section .parallax-btn:hover::before {
left: 0;
}
.parallax-section .parallax-btn:hover::after {
right: 0;
}
/* rotate animation */
/* CSS */
@keyframes customRotate {
from {
transform: rotate(0deg);
opacity: 0;
}
to {
transform: rotate(360deg);
opacity: 1;
}
}
.rotate-it {
animation-name: customRotate;
animation-duration: 1s;
animation-fill-mode: both;
}
/* index comparison table */
.fireworks-guide-section {
position: relative;
overflow: hidden;
}
.fireworks-guide-section .guide-section-title {
font-size: 2.25rem;
color: var(--color3);
position: relative;
display: inline-block;
font-weight: 700;
}
.fireworks-guide-section .guide-section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--color4);
animation: guideTitleUnderline 2s infinite alternate;
}
@keyframes guideTitleUnderline {
0% {
width: 80px;
}
100% {
width: 120px;
}
}
.fireworks-guide-section .guide-section-subtitle {
font-size: 1.1rem;
color: var(--color3);
opacity: 0.8;
}
/* Tabs */
.fireworks-guide-section .guide-section-tabs {
background: #f8f9fa;
border-radius: 50px;
padding: 5px;
position: relative;
}
.fireworks-guide-section .guide-section-tab {
border: none;
background: transparent;
padding: 10px 25px;
font-weight: 600;
color: var(--color3);
position: relative;
z-index: 1;
transition: all 0.3s ease;
cursor: pointer;
outline: none;
}
.fireworks-guide-section .guide-section-tab.active {
color: white;
background-color: var(--color2);
}
.fireworks-guide-section .guide-section-tabs::after {
content: "";
position: absolute;
top: 5px;
left: 5px;
height: calc(100% - 10px);
width: calc(50% - 10px);
border-radius: 50px;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Table */
.fireworks-guide-section .guide-section-table-wrapper {
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.fireworks-guide-section .guide-section-table {
border-collapse: collapse;
width: 100%;
}
.fireworks-guide-section .guide-section-table-header {
background-color: var(--color3);
color: white;
padding: 15px;
text-align: left;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85rem;
}
.fireworks-guide-section .guide-section-table-row {
background-color: white;
transition: all 0.3s ease;
}
.fireworks-guide-section .guide-section-table-row:not(.active) {
display: none;
}
.fireworks-guide-section .guide-section-table-row td {
padding: 15px;
border-bottom: 1px solid #f0f0f0;
}
.fireworks-guide-section .guide-section-table-category-content {
display: flex;
align-items: center;
}
.fireworks-guide-section .guide-section-table-category-icon {
font-size: 1.5rem;
margin-right: 15px;
}
.fireworks-guide-section .guide-section-table-duration {
color: var(--color2);
font-weight: 500;
}
.fireworks-guide-section .guide-section-table-noise {
color: var(--color4);
font-weight: 500;
}
/* Product Cards */
.fireworks-guide-section .guide-section-product {
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid #f0f0f0;
text-align: center;
cursor: pointer;
height: 100%;
}
.fireworks-guide-section .guide-section-product-card:not(.active) {
display: none;
}
.fireworks-guide-section .guide-section-product:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-color: rgba(90, 55, 195, 0.2);
}
.fireworks-guide-section .guide-section-product-icon-container {
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.fireworks-guide-section .guide-section-product-icon {
font-size: 2.25rem;
transition: all 0.3s ease;
}
.fireworks-guide-section .guide-section-product:hover .guide-section-product-icon {
animation: productIconBounce 0.6s ease;
}
@keyframes productIconBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.fireworks-guide-section .guide-section-product-title {
font-size: 1.1rem;
color: var(--color3);
margin-bottom: 8px;
font-weight: 600;
}
.fireworks-guide-section .guide-section-product-desc {
color: #666;
font-size: 0.85rem;
min-height: 40px;
}
.fireworks-guide-section .guide-section-product-attributes {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.fireworks-guide-section .guide-section-product-attribute {
padding: 4px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.fireworks-guide-section .guide-section-product-attribute-duration {
background-color: rgba(90, 55, 195, 0.1);
color: var(--color2);
}
.fireworks-guide-section .guide-section-product-attribute-noise {
background-color: rgba(222, 27, 74, 0.1);
color: var(--color4);
}
.fireworks-guide-section .guide-section-product-attribute-safety {
background-color: rgba(244, 224, 34, 0.1);
color: #d4a017;
}
.fireworks-guide-section .guide-section-product:hover .guide-section-product-attribute {
transform: scale(1.05);
}
/* About Us Section - Desktop First */
.about-us-section {
background: white;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.about-us-section::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
rgba(244, 224, 34, 0.1) 0%,
transparent 70%);
animation: rotate 20s linear infinite;
z-index: 0;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.about-us-section .section-title {
font-size: 3.2rem;
font-weight: 700;
color: var(--color3);
text-align: center;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.about-us-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color1), var(--color4));
border-radius: 2px;
}
.about-us-section .section-subtitle {
font-size: 1.3rem;
color: var(--color2);
text-align: center;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
.about-us-section .story-content {
position: relative;
z-index: 2;
padding-right: 30px;
}
.about-us-section .story-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--color1), var(--color4));
color: white;
padding: 10px 20px;
border-radius: 25px;
font-weight: 600;
margin-bottom: 25px;
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
0%,
100% {
box-shadow: 0 0 0 rgba(244, 224, 34, 0.4);
}
50% {
box-shadow: 0 0 20px rgba(244, 224, 34, 0.6);
}
}
.about-us-section .story-badge i {
font-size: 1.2rem;
margin-right: 8px;
}
.about-us-section .story-title {
font-size: 2.5rem;
font-weight: 600;
color: var(--color3);
margin-bottom: 25px;
}
.about-us-section .story-text {
font-size: 1.1rem;
line-height: 1.7;
color: #555;
margin-bottom: 20px;
}
.about-us-section .story-highlights {
margin-top: 30px;
}
.about-us-section .highlight-item {
display: flex;
align-items: center;
margin-bottom: 12px;
transition: transform 0.3s ease;
}
.about-us-section .highlight-item:hover {
transform: translateX(10px);
}
.about-us-section .highlight-item i {
color: var(--color4);
font-size: 1.2rem;
margin-right: 12px;
}
.about-us-section .highlight-item span {
font-weight: 500;
color: var(--color3);
}
.about-us-section .vision-card {
background: linear-gradient(135deg, var(--color2), var(--color3));
border-radius: 25px;
padding: 50px 40px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
height: 100%;
min-height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
}
.about-us-section .vision-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: sparkle 4s ease-in-out infinite;
}
@keyframes sparkle {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 0.8;
}
}
.about-us-section .vision-icon {
width: 90px;
height: 90px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2.5rem;
position: relative;
z-index: 2;
transition: all 0.4s ease;
}
.about-us-section .vision-card:hover .vision-icon {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.3);
}
.about-us-section .vision-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.about-us-section .vision-text {
font-size: 1.1rem;
line-height: 1.6;
opacity: 0.95;
position: relative;
z-index: 2;
}
.about-us-section .service-card {
background: white;
border-radius: 20px;
padding: 40px 25px;
text-align: center;
box-shadow: 0 8px 25px rgba(24, 34, 75, 0.1);
transition: all 0.4s ease;
border: 2px solid transparent;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.about-us-section .service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--color1),
var(--color4),
var(--color2));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.about-us-section .service-card:hover::before {
transform: scaleX(1);
}
.about-us-section .service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(24, 34, 75, 0.15);
border-color: var(--color1);
}
/* .about-us-section .service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--color1), var(--color4));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.8rem;
color: white;
transition: all 0.4s ease;
} */
/* .about-us-section .service-card:hover .service-icon {
transform: rotateY(180deg);
background: linear-gradient(135deg, var(--color4), var(--color2));
} */
.service03 {
width: 125px;
text-align: center;
margin: 0px auto 20px !important;
}
.about-us-section .service-title {
font-size: 1.7rem;
font-weight: 600;
color: var(--color3);
margin-bottom: 15px;
color: red;
}
.about-us-section .service-description {
font-size: 0.95rem;
line-height: 1.6;
color: #666;
}
.bgclr3 {
background-image: url("../images/fullview.webp");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
height: auto;
}
.bgclr3::before {
background: #000 none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
top: 0;
opacity: 0.7;
width: 100%;
position: absolute;
}
.btn-5:hover {
color: #fff493;
border: 1px solid #fff493;
box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #fff493;
}
.paralbtn {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
max-width: 190px;
text-decoration: none;
text-transform: uppercase;
width: 100%;
margin: 0px auto;
}
.btn-5 {
color: #fff493;
border: 1px solid #fff493;
box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #fff493;
border: 1px solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(255, 255, 255, .5);
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes sweep {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
.about-us-section .commitment-content {
position: relative;
z-index: 2;
}
.about-us-section .commitment-heart {
font-size: 3rem;
color: var(--color4);
margin-bottom: 20px;
animation: heartbeat 2s ease-in-out infinite;
}
.dhamaka {
width: 320px;
}
.clr3 {
color: red !important;
}
.btn2 {
background-color: #F61E1E !important;
padding: 14px 26px !important;
border: 1px solid black !important;
transition: .3s;
font-size: 16px !important;
letter-spacing: .8px;
border-radius: 2px !important;
text-transform: uppercase !important;
color: white !important;
}
.btn2:hover {
box-shadow: -5px 5px #020202;
transition: .3s;
border: 0 !important;
}
@keyframes heartbeat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.about-us-section .commitment-title {
font-size: 2.2rem;
font-weight: 600;
color: var(--color3);
margin-bottom: 20px;
}
.about-us-section .commitment-text {
font-size: 1.2rem;
line-height: 1.7;
color: #555;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.about-us-section .commitment-cta {
background: linear-gradient(135deg, var(--color2), var(--color3));
border: none;
color: white;
padding: 18px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.about-us-section .commitment-cta:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(90, 55, 195, 0.4);
background: linear-gradient(135deg, var(--color3), var(--color4));
}
.about-us-section .commitment-cta i {
transition: transform 0.3s ease;
}
.about-us-section .commitment-cta:hover i {
transform: translateX(5px);
}
/* about brands */
.brands-swiper-section {
background: linear-gradient(135deg,
rgba(244, 224, 34, 0.05),
rgba(90, 55, 195, 0.05));
padding: 100px 0;
position: relative;
overflow: hidden;
}
.brands-swiper-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 200px 200px;
animation: float-pattern 20s ease-in-out infinite;
z-index: 1;
}
@keyframes float-pattern {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
33% {
transform: translate(20px, -10px) rotate(120deg);
}
66% {
transform: translate(-10px, 20px) rotate(240deg);
}
}
.brands-swiper-section .brands-title {
font-size: 3rem;
font-weight: 700;
color: var(--color3);
text-align: center;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.brands-swiper-section .brands-title::after {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--color1), var(--color4));
border-radius: 2px;
}
.brands-swiper-section .brands-subtitle {
font-size: 1.2rem;
color: var(--color2);
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.brands-swiper-section .brands-swiper-container {
position: relative;
z-index: 2;
padding: 20px 0 40px;
}
.brands-swiper-section .swiper-wrapper {
display: flex;
transition-timing-function: ease-in-out;
}
.brands-swiper-section .swiper-slide {
height: auto;
width: auto !important;
}
.brands-swiper-section .brand-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(24, 34, 75, 0.1);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
border: 3px solid transparent;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
@keyframes move {
0% {
background-position: 1920px 0;
}
100% {
background-position: 0 0;
}
}
.brands-swiper-section .brand-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 30%,
rgba(244, 224, 34, 0.1) 50%,
transparent 70%);
opacity: 0;
transform: translateX(-100%);
transition: all 0.6s ease;
}
.brands-swiper-section .brand-card:hover::before {
opacity: 1;
transform: translateX(100%);
}
.brands-swiper-section .brand-card:hover {
transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
box-shadow: 0 25px 50px rgba(24, 34, 75, 0.2);
border-color: var(--color1);
}
.brands-swiper-section .brand-logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--color2), var(--color3));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2.2rem;
color: white;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
z-index: 2;
}
.brands-swiper-section .brand-logo img {
border-radius: 50%;
}
.brands-swiper-section .brand-card:hover .brand-logo {
transform: scale(1.2) rotate(360deg);
background: linear-gradient(135deg, var(--color1), var(--color4));
box-shadow: 0 0 25px rgba(244, 224, 34, 0.5);
}
.brands-swiper-section .brand-logo::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid transparent;
border-radius: 50%;
transition: all 0.4s ease;
}
.brands-swiper-section .brand-card:hover .brand-logo::after {
border-color: var(--color1);
animation: pulse-ring 1.5s ease-in-out infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
.brands-swiper-section .brand-name {
font-size: 1.4rem;
font-weight: 600;
color: var(--color3);
margin-bottom: 15px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.brands-swiper-section .brand-card:hover .brand-name {
color: var(--color4);
transform: translateY(-5px);
}
.brands-swiper-section .brand-description {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.brands-swiper-section .brand-card:hover .brand-description {
color: #555;
}
/* .brands-swiper-section .brand-rating {
display: flex;
justify-content: center;
gap: 5px;
position: relative;
z-index: 2;
}
.brands-swiper-section .brand-rating i {
color: var(--color1);
font-size: 1.1rem;
transition: all 0.3s ease;
transform: scale(0.9);
}
.brands-swiper-section .brand-card:hover .brand-rating i {
transform: scale(1.1);
color: var(--color4);
animation: star-twinkle 0.6s ease-in-out;
} */
@keyframes star-twinkle {
0%,
100% {
transform: scale(1.1);
}
50% {
transform: scale(1.3);
}
}
.brands-swiper-section .brand-rating i:nth-child(1) {
animation-delay: 0.1s;
}
.brands-swiper-section .brand-rating i:nth-child(2) {
animation-delay: 0.2s;
}
.brands-swiper-section .brand-rating i:nth-child(3) {
animation-delay: 0.3s;
}
.brands-swiper-section .brand-rating i:nth-child(4) {
animation-delay: 0.4s;
}
.brands-swiper-section .brand-rating i:nth-child(5) {
animation-delay: 0.5s;
}
.brands-swiper-section .swiper-pagination {
position: static;
margin-top: 30px;
text-align: center;
}
.brands-swiper-section .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: var(--color2);
opacity: 0.3;
transition: all 0.3s ease;
margin: 0 5px;
}
.block-head {
position: relative;
margin-bottom: 20px;
padding: 0 0 20px;
border-bottom: 1px #cac9c9 solid;
color: #333e48;
}
.block-head::before {
position: absolute;
bottom: -3px;
left: 20px;
width: 35px;
height: 5px;
content: "";
display: inline-block;
background-color: #559926;
}
.block-head::after {
position: absolute;
bottom: -1px;
left: 0;
width: 80px;
height: 1px;
content: "";
display: inline-block;
background-color: #559926;
}
.block-head1 {
position: relative;
margin-bottom: 20px;
padding: 0 0 20px;
border-bottom: 1px #cac9c9 solid;
color: #333e48;
}
.block-head1::before {
position: absolute;
bottom: -3px;
left: 20px;
width: 35px;
height: 5px;
content: "";
display: inline-block;
background-color: #b61818;
}
.block-head1::after {
position: absolute;
bottom: -1px;
left: 0;
width: 80px;
height: 1px;
content: "";
display: inline-block;
background-color: #b61818;
}
.feature-gd {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
height: 150px;
margin-bottom: 10px;
}
.gicon,
.ricons {
margin-right: 1em;
}
.gicon i {
color: #559926;
font-size: 52px;
background: rgb(13 54 159 / 9%);
width: 65px;
height: 65px;
line-height: 65px;
border-radius: 50%;
text-align: center;
display: inline-block;
}
.ricons i {
color: #b61818;
font-size: 50px;
background: rgb(13 54 159 / 9%);
width: 65px;
height: 65px;
line-height: 65px;
border-radius: 50%;
text-align: center;
display: inline-block;
}
.feature-gd:hover .gicon,
.feature-gd:hover .ricons {
transform: rotate(360deg);
transition: .5s all ease;
}
.brands-swiper-section .swiper-pagination-bullet-active {
background: var(--color1);
opacity: 1;
transform: scale(1.3);
}
.brands-swiper-section .swiper-button-prev,
.brands-swiper-section .swiper-button-next {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(24, 34, 75, 0.2);
transition: all 0.3s ease;
color: var(--color2);
margin-top: -25px;
}
.brands-swiper-section .swiper-button-prev:hover,
.brands-swiper-section .swiper-button-next:hover {
background: var(--color1);
color: black;
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(244, 224, 34, 0.4);
}
.brands-swiper-section .swiper-button-prev::after,
.brands-swiper-section .swiper-button-next::after {
display: none;
}
.brands-swiper-section .swiper-button-prev i,
.brands-swiper-section .swiper-button-next i {
font-size: 1.2rem;
}
.brands-swiper-section .swiper-button-prev {
position: absolute;
left: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.brands-swiper-section .swiper-button-next {
position: absolute;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.brands-swiper-section .brands-footer {
text-align: center;
margin-top: 60px;
position: relative;
z-index: 2;
}
.brands-swiper-section .partnership-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--color4), var(--color2));
color: white;
padding: 12px 25px;
border-radius: 30px;
font-weight: 600;
margin-bottom: 20px;
animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
0%,
100% {
box-shadow: 0 0 0 rgba(222, 27, 74, 0.4);
}
50% {
box-shadow: 0 0 20px rgba(222, 27, 74, 0.6);
}
}
.brands-swiper-section .partnership-badge i {
font-size: 1.3rem;
margin-right: 10px;
}
.brands-swiper-section .partnership-text {
font-size: 1.1rem;
color: #666;
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.pyro-safety-guide {
padding: 80px 0;
background-color: #f2df44;
position: relative;
overflow: hidden;
}
.pyro-safety-guide .pyro-safety-hero {
margin-bottom: 60px;
}
.pyro-safety-guide .pyro-safety-badge {
display: inline-block;
background: rgba(244, 224, 34, 0.2);
color: #172a71;
padding: 8px 25px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 20px;
border: 1px solid rgba(244, 224, 34, 0.3);
}
.pyro-safety-guide .pyro-safety-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--color3);
margin-bottom: 15px;
line-height: 1.2;
}
.pyro-safety-guide .pyro-safety-intro {
font-size: 1.1rem;
color: var(--color3);
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.pyro-safety-guide .pyro-safety-card {
background: white;
border-radius: 12px;
padding: 30px;
height: 100%;
box-shadow: 0 10px 30px rgba(24, 34, 75, 0.1);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
overflow: hidden;
}
.pyro-safety-guide .pyro-safety-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: var(--color1);
transition: all 0.4s ease;
}
.pyro-safety-guide .pyro-safe-card::before {
background: var(--color2);
}
.pyro-safety-guide .pyro-hazard-card::before {
background: var(--color4);
}
.pyro-safety-guide .pyro-emergency-card::before {
background: var(--color3);
}
.pyro-safety-guide .pyro-safety-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(24, 34, 75, 0.15);
}
.pyro-safety-guide .pyro-safety-card:hover::before {
width: 8px;
}
.pyro-safety-guide .pyro-card-header {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.pyro-safety-guide .pyro-card-icon {
width: 50px;
height: 50px;
background: rgba(90, 55, 195, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--color2);
margin-right: 15px;
flex-shrink: 0;
}
.pyro-safety-guide .pyro-safe-card .pyro-card-icon {
background: rgba(90, 55, 195, 0.1);
color: var(--color2);
}
.pyro-safety-guide .pyro-hazard-card .pyro-card-icon {
background: rgba(222, 27, 74, 0.1);
color: var(--color4);
}
.pyro-safety-guide .pyro-emergency-card .pyro-card-icon {
background: rgba(24, 34, 75, 0.1);
color: var(--color3);
}
.pyro-safety-guide .pyro-card-header h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color3);
margin: 0;
}
.pyro-safety-guide .pyro-safety-list {
list-style: none;
padding: 0;
margin: 0;
}
.pyro-safety-guide .pyro-list-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
font-size: 0.95rem;
line-height: 1.5;
}
.pyro-safety-guide .pyro-check-icon {
color: var(--color2);
font-size: 18px;
margin-right: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.pyro-safety-guide .pyro-x-icon {
color: var(--color4);
font-size: 18px;
margin-right: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.pyro-safety-guide .pyro-emergency-steps {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step-counter;
}
.pyro-safety-guide .pyro-step {
display: flex;
align-items: center;
margin-bottom: 15px;
position: relative;
padding-left: 40px;
min-height: 30px;
}
.pyro-safety-guide .pyro-step-number {
position: absolute;
left: 0;
width: 30px;
height: 30px;
background: var(--color3);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.pyro-safety-guide .pyro-safety-cta {
background: linear-gradient(135deg, var(--color3) 0%, var(--color2) 100%);
border-radius: 12px;
padding: 40px;
margin-top: 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.pyro-safety-guide .pyro-cta-content {
position: relative;
z-index: 2;
}
.pyro-safety-guide .pyro-cta-title {
color: white;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px;
}
.pyro-safety-guide .pyro-cta-text {
color: rgba(255, 255, 255, 0.9);
font-size: 1.05rem;
margin-bottom: 25px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.pyro-safety-guide .pyro-cta-btn {
display: inline-flex;
align-items: center;
background: var(--color1);
color: white;
padding: 15px 35px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.pyro-safety-guide .pyro-cta-btn:hover {
background: white;
color: var(--color3);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.pyro-safety-guide .pyro-cta-btn i {
margin-right: 10px;
font-size: 18px;
}
/* contact page styles */
/* Animation keyframes */
@keyframes glowPulse {
0% {
box-shadow: 0 0 0 0 rgba(244, 224, 34, 0.6);
}
50% {
box-shadow: 0 0 15px 10px rgba(244, 224, 34, 0.3);
}
100% {
box-shadow: 0 0 0 0 rgba(244, 224, 34, 0);
}
}
@keyframes slideFade {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* CONTACT HEADER */
.connect-section-header {
background-color: var(--color1);
color: var(--color3);
position: relative;
overflow: hidden;
}
.connect-section-header::after {
content: "";
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to right, var(--color4), var(--color2));
clip-path: polygon(0 100%, 100% 0%, 100% 100%);
}
.connect-section-header .connect-title {
font-size: 3rem;
font-weight: 800;
text-transform: uppercase;
animation: slideFade 1s ease-out;
}
.connect-section-header .connect-tagline {
font-size: 1.25rem;
color: var(--color2);
}
/* CONTACT CARDS */
.connect-info-cards .connect-card {
position: relative;
background: #1b8cde;
padding: 2rem;
border-radius: 1.25rem;
color: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
.connect-info-cards .connect-card::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 136%;
height: 138%;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.15),
transparent 60%);
animation: glowPulse 3s infinite;
border-radius: 50% 0px;
}
.connect-info-cards .connect-card:hover {
transform: translateY(-10px);
box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
}
.connect-info-cards .connect-icon-box {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--color1);
}
.connect-map-visit .connect-map {
height: 100%;
overflow: hidden;
border-radius: 0.75rem;
animation: slideFade 1.2s ease;
}
.connect-map-visit .connect-visit-info {
background-color: var(--color2);
color: #fff;
padding: 2.5rem;
border-radius: 1rem;
animation: slideFade 1.4s ease;
}
.connect-map-visit .connect-visit-info h3 {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.connect-map-visit .connect-visit-info ul li {
padding: 0.5rem 0;
font-size: 1rem;
}
.connect-map-visit .btn {
font-weight: 700;
transition: transform 0.2s ease-in-out;
}
.connect-map-visit .btn:hover {
transform: scale(1.05);
}
/* SAFETY BANNER */
.connect-safety-banner {
background-color: var(--color3);
color: var(--color1);
text-align: center;
position: relative;
overflow: hidden;
}
.connect-safety-banner .connect-safety-box {
padding: 3rem 2rem;
background: rgba(255, 255, 255, 0.05);
border: 2px dashed var(--color1);
border-radius: 1.25rem;
animation: glowPulse 5s infinite;
}
.connect-safety-banner a.btn {
margin-top: 1rem;
transition: all 0.3s ease;
}
.connect-safety-banner a.btn:hover {
background-color: var(--color1);
color: var(--color4);
border-color: var(--color1);
}
/* footer styles */
.pyro-footer {
background: linear-gradient(145deg, #b10000 0%, #680000 100%);
color: white;
padding: 80px 0 10px;
position: relative;
overflow: hidden;
}
.pyro-footer-svg-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
}
.pyro-footer .container {
position: relative;
z-index: 2;
}
.pyro-footer-brand {
display: flex;
flex-direction: column;
}
.pyro-footer-logo {
font-size: 52px;
font-weight: 900;
color: var(--color1);
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, var(--color1) 0%, #ffffff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pyro-footer-tagline {
font-size: 1rem;
font-weight: 300;
letter-spacing: 1px;
color: rgba(244, 224, 34, 0.8);
position: relative;
padding-left: 15px;
display: flex;
align-items: center;
}
.pyro-footer-tagline::before {
content: "";
position: absolute;
left: 0;
width: 8px;
height: 8px;
background: var(--color4);
border-radius: 50%;
}
.pyro-footer-about p {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(244, 224, 34, 0.8);
margin-bottom: 0;
}
.pyro-links-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color1);
position: relative;
display: flex;
align-items: center;
}
.pyro-links-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: var(--color4);
border-radius: 3px;
}
.pyro-footer-link {
color: white;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
position: relative;
}
.pyro-footer-link .link-icon {
transform: translateX(-5px);
transition: all 0.3s ease;
color: white;
}
.pyro-footer-link:hover {
color: var(--color1);
text-decoration: none;
transform: translateX(5px);
}
.pyro-contact-item {
color: white;
font-size: 0.95rem;
line-height: 1.5;
transition: all 0.3s ease;
}
.pyro-contact-item i {
color: white;
font-size: 18px;
transition: all 0.3s ease;
}
.pyro-contact-item:hover {
color: var(--color1);
transform: translateX(5px);
}
.pyro-contact-item:hover i {
transform: scale(1.2);
}
.pyro-badge {
background: rgba(222, 27, 74, 0.15);
padding: 8px 15px;
border-radius: 50px;
font-size: 0.8rem;
border: 1px solid rgba(222, 27, 74, 0.3);
transition: all 0.3s ease;
}
.pyro-badge i {
color: var(--color4);
transition: all 0.3s ease;
}
.pyro-badge:hover {
background: rgba(222, 27, 74, 0.3);
transform: translateY(-3px);
}
.pyro-badge:hover i {
transform: scale(1.2);
}
.pyro-footer-copyright {
text-align: center;
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid rgba(244, 224, 34, 0.1);
color: white;
font-size: 0.9rem;
}
.padd1 {
padding: 40px 0px;
}
.pyro-footer-copyright a {
color: var(--color1);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.pyro-footer-copyright a:hover {
color: var(--color4);
text-decoration: none;
}
/* Responsive Styles */
@media (min-width: 768px) and (max-width: 991.98px) {}
@media (min-width: 1px) and (max-width: 767.98px) {
.pyro-footer-svg-bg {
opacity: 0 !important;
}
.home-hero .hero-highlight {
font-size: 40px;
}
.pad1 {
padding: 0 16px !important;
}
.home-hero .hero-image {
margin-bottom: 60px !important;
}
.home-hero .hero-title {
font-size: 21px;
margin-top: 21px;
}
.pl-35 {
padding-left: 35px !important;
}
}
/* utility classes */
.text-purple {
color: var(--color2);
}
.home-products .product-tile {
height: 14em !important;
}
/* custom css ends */
.w0 {
width: 0%;
}
.fixed {
position: fixed;
z-index: 2;
}
.priceicn {
width: 50px;
}
.priceicn2 {
width: 120px;
}
.point {
bottom: 10px;
left: 10px;
}
.point1 {
bottom: 70px;
left: 10px;
}
.point2 {
bottom: 15px;
right: 10px;
}
.blink {
-webkit-animation: blink 1s;
animation: blink 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* media querries start */
@media (min-width: 768px) and (max-width: 991.98px) {
/* footer */
.pyro-footer {
padding: 60px 0 25px;
}
.pyro-footer-logo {
font-size: 2rem;
}
.pyro-links-title {
font-size: 1.2rem;
}
.pyro-footer-link {
font-size: 0.9rem;
}
.pyro-contact-item {
font-size: 0.9rem;
}
.pyro-footer-copyright {
padding-top: 40px;
margin-top: 40px;
}
/* contact page */
.connect-section-header .connect-title {
font-size: 2.5rem;
}
.connect-info-cards .connect-card {
padding: 1.75rem;
}
.connect-map-visit .connect-visit-info {
padding: 2rem;
}
.connect-safety-banner .connect-safety-box {
padding: 2.5rem;
}
/* safety page */
.pyro-safety-guide {
padding: 60px 0;
}
.pyro-safety-guide .pyro-safety-title {
font-size: 2.2rem;
}
.pyro-safety-guide .pyro-safety-intro {
font-size: 1rem;
}
.pyro-safety-guide .pyro-safety-card {
padding: 25px;
}
.pyro-safety-guide .pyro-card-header h2 {
font-size: 1.3rem;
}
.pyro-safety-guide .pyro-cta-title {
font-size: 1.5rem;
}
/* about why choose */
.why-choose-section .why-choose-card-inner,
.why-choose-section .why-choose-hover-content {
padding: 20px;
}
/* about brands swiper */
.brands-swiper-section {
padding: 80px 0;
}
.brands-swiper-section .brands-title {
font-size: 2.5rem;
}
.brands-swiper-section .brand-card {
padding: 35px 25px;
}
.brands-swiper-section .brands-footer {
margin-top: 50px;
}
/* about us intro */
.about-us-section {
padding: 80px 0;
}
.about-us-section .section-title {
font-size: 2.8rem;
}
.about-us-section .story-content {
padding-right: 15px;
margin-bottom: 40px;
}
.about-us-section .service-card {
margin-bottom: 25px;
}
.about-us-section .commitment-banner {
padding: 50px 30px;
margin-top: 40px;
}
/* index last */
.fireworks-guide-section .guide-section-title {
font-size: 2rem;
}
.fireworks-guide-section .guide-section-product-icon {
font-size: 2rem;
}
.fireworks-guide-section .guide-section-product-title {
font-size: 1rem;
}
/* index parallax */
.parallax-section {
min-height: 400px;
}
.parallax-section .parallax-title {
font-size: 2rem;
}
.parallax-section .parallax-text {
font-size: 1.1rem;
}
.parallax-section .parallax-btn {
padding: 10px 25px;
font-size: 0.9rem;
}
/* index counter */
.home-counter .home-counter-title {
font-size: 2rem;
}
.home-counter .counter-number {
font-size: 2.25rem;
}
/* index products */
.home-products .product-heading {
font-size: 2.2rem;
}
/* index hero */
.home-hero .hero-title {
font-size: 2.5rem;
}
.home-hero .hero-image {
width: 100%;
}
/* index swiper */
.vertical-swiper-section {
padding: 60px 0;
}
.vertical-swiper-container {
height: 500px;
}
/* header */
.fire-header-section .fire-header-contact {
font-size: 0.8rem;
padding: 8px 10px;
}
.fire-header-section .fire-header-logo {
height: 45px;
}
.fire-header-section .fire-header-nav-sparkle {
width: 35px;
height: 35px;
}
.fire-header-section .fire-header-nav-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pad {
padding: 40px 0;
}
.home-hero .hero-image img {
width: 25%;
}
}
@media (min-width: 1px) and (max-width: 767.98px) {
/* footer */
.pyro-footer {
padding: 50px 0 20px;
}
.logo {
width: 110px !important;
}
.pyro-footer-brand {
text-align: center;
align-items: center;
margin-bottom: 25px;
}
.pyro-footer-logo {
font-size: 1.8rem;
}
.pyro-footer-tagline {
font-size: 0.9rem;
justify-content: center;
}
.pyro-footer-about p {
font-size: 0.9rem;
text-align: center;
}
.pyro-links-title::after {
left: 8%;
transform: translateX(-50%);
}
.pyro-footer-link {
font-size: 0.9rem;
justify-content: center;
}
.pyro-contact-item {
font-size: 0.9rem;
justify-content: center;
}
.pyro-certification {
justify-content: center;
}
.pyro-footer-copyright {
padding-top: 30px;
margin-top: 30px;
font-size: 0.85rem;
}
/* contact page */
.connect-section-header .connect-title {
font-size: 2rem;
}
.connect-section-header::after {
height: 40px;
clip-path: polygon(0 100%, 100% 0%, 100% 100%);
}
.connect-info-cards .connect-card {
padding: 1.5rem;
}
.connect-map-visit .connect-visit-info {
padding: 1.5rem;
text-align: center;
}
.connect-map-visit .connect-visit-info h3 {
font-size: 1.5rem;
}
.connect-map-visit .btn {
width: 100%;
}
.connect-safety-banner .connect-safety-box {
padding: 2rem 1rem;
}
/* safety page */
.pyro-safety-guide {
padding: 50px 0;
}
.pyro-safety-guide .pyro-safety-hero {
margin-bottom: 40px;
}
.pyro-safety-guide .pyro-safety-title {
font-size: 1.8rem;
}
.pyro-safety-guide .pyro-safety-intro {
font-size: 0.95rem;
}
.pyro-safety-guide .pyro-card-header {
flex-direction: column;
text-align: center;
margin-bottom: 20px;
}
.pyro-safety-guide .pyro-card-icon {
margin-right: 0;
margin-bottom: 15px;
}
.pyro-safety-guide .pyro-safety-cta {
padding: 30px 20px;
}
.pyro-safety-guide .pyro-cta-title {
font-size: 1.3rem;
}
.pyro-safety-guide .pyro-cta-btn {
padding: 12px 25px;
font-size: 0.95rem;
}
/* about why choose */
.why-choose-section .why-choose-card {
margin-bottom: 15px;
}
/* about brands swiper */
.brands-swiper-section {
padding: 60px 0;
}
.brands-swiper-section .brands-title {
font-size: 2.2rem;
}
.brands-swiper-section .brands-subtitle {
margin-bottom: 40px;
}
.brands-swiper-section .brand-card {
padding: 30px 20px;
}
.brands-swiper-section .brand-card:hover {
transform: translateY(-8px) rotateX(2deg) rotateY(2deg);
}
.brands-swiper-section .swiper-button-prev,
.brands-swiper-section .swiper-button-next {
display: none;
}
.brands-swiper-section .brands-footer {
margin-top: 40px;
}
.brands-swiper-section .partnership-text {
font-size: 1rem;
}
/* about us intro */
.about-us-section {
padding: 60px 0;
}
.about-us-section .section-title {
font-size: 2.2rem;
}
.about-us-section .section-subtitle {
margin-bottom: 50px;
}
.about-us-section .story-content {
padding-right: 0;
margin-bottom: 30px;
}
.about-us-section .story-title {
font-size: 2rem;
}
.about-us-section .vision-card {
margin-bottom: 40px;
min-height: 280px;
padding: 40px 30px;
}
.about-us-section .service-card {
margin-bottom: 20px;
padding: 30px 20px;
}
.about-us-section .commitment-banner {
padding: 40px 25px;
margin-top: 30px;
}
.about-us-section .commitment-title {
font-size: 1.8rem;
}
.about-us-section .commitment-text {
font-size: 1.1rem;
}
/* index last */
.fireworks-guide-section {
padding: 40px 0;
}
.fireworks-guide-section .guide-section-title {
font-size: 1.75rem;
}
.fireworks-guide-section .guide-section-tab {
padding: 8px 15px;
font-size: 0.9rem;
}
.fireworks-guide-section .guide-section-product {
padding: 15px;
}
.fireworks-guide-section .guide-section-product-icon {
font-size: 1.75rem;
}
.fireworks-guide-section .guide-section-product-attribute {
font-size: 0.65rem;
padding: 3px 8px;
}
/* index parallax */
.parallax-section {
min-height: 350px;
text-align: center;
background-attachment: scroll;
}
.parallax-section .parallax-content {
padding-top: 40px;
padding-bottom: 40px;
}
.parallax-section .parallax-title {
font-size: 1.8rem;
}
.parallax-section .parallax-text {
font-size: 1rem;
max-width: 100%;
margin-bottom: 25px;
}
.parallax-section .parallax-btn {
padding: 8px 20px;
font-size: 0.85rem;
}
/* index counter */
.home-counter .home-counter-title {
font-size: 1.75rem;
}
.home-counter .home-counter-desc {
font-size: 1rem;
}
.home-counter .counter-number {
font-size: 2rem;
}
/* index products */
.home-products .product-heading {
font-size: 2rem;
}
.home-products .product-subheading {
font-size: 1rem;
}
.home-products .product-tile {
padding: 2rem 1rem;
}
/* index hero */
.home-hero {
padding: 3rem 1rem;
}
.home-hero .hero-subtext {
font-size: 1rem;
}
/* index swiper */
.vertical-swiper-section {
padding: 40px 0;
padding-top: 0;
}
.vertical-swiper-container {
height: 350px;
}
.vertical-swiper-slide {
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
}
/* header */
.fire-header-section .fire-header-contact {
justify-content: flex-start;
padding: 6px 15px;
}
.fire-header-section .fire-header-nav {
padding: 10px 0;
}
.fire-header-section .navbar-collapse {
background-color: var(--color3);
padding: 15px;
margin-top: 10px;
}
.fire-header-section .fire-header-nav-sparkle {
width: 30px;
height: 30px;
left: 40px;
}
.fire-header-section .fire-header-logo-sparkle {
width: 50px;
height: 50px;
}
.fire-header-section .fire-header-nav-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pad {
padding: 40px 0;
}
}
/* media querries end */
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 410px;
width: 100%;
text-align: center;
}
.oopslogo {
width: 350px;
}
.notfound h2 {
color: #000;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}
.notfound p {
color: #000;
font-size: 18px;
font-weight: 400;
margin-bottom: 15px;
margin-top: 5px;
}
.notfound a {
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
background: #0046d5;
display: inline-block;
padding: 15px 30px;
border-radius: 40px;
color: #fff;
font-weight: 700;
box-shadow: 0px 4px 15px -5px #0046d5;
}
@media only screen and (max-width: 767px) {
.notfound .notfound-404 {
height: 142px;
}
}
.time-of-year {
margin: 100px 75px 10px 75px;
position: relative;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.time-of-year .tooltip {
background: #db2a1b;
border-radius: 3px;
bottom: -49px;
font-size: 20px;
display: block;
left: -67px;
padding: 15px;
pointer-events: none;
position: absolute;
width: 320px;
height: 100px;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.time-of-year .tooltip::after {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #db2a1b;
bottom: 58px;
content: " ";
position: absolute;
left: 0%;
margin-left: -13px;
transform: rotate(92deg);
}
.time-of-year:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.navbg {
background-color: #fff5fa;
}
.navfont {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold
}
.navbar-light .navbar-nav .nav-link {
color: #777575 !important;
}
.navbar-light .navbar-nav .active>.nav-link {
color: #d50101 !important;
}
.logo {
width: 135px;
position: absolute;
top: 0px;
background: #0d0b22;
border-radius: 0 0 25px 25px;
padding: 0 9px 0px 9px;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
z-index: 999;
}
.social_point3 {
bottom: 120px;
left: 10px;
}
.social_img {
width: 50px;
}
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}