@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
        
        :root {
            --primary-red: #dc2626;
            --dark-red: #991b1b;
            --deep-slate: #0f172a;
            --accent-gold: #d4af37;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glow-green: #00ffcc;
            --step-number-blue: #4a4ae2;
            --step-success-green: #28a745;
            --bg-deep: #001a1a;
            --bg-card: #002222;
            --gold: #e2c073;
            --gold-glow: rgba(226, 192, 115, 0.3);
            --glass-border: rgba(255, 255, 255, 0.12);
        }


        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #ffffff; 
            margin: 0;
            padding: 0;
        }

        /* Seamless High-Speed Ticker */
        @keyframes ticker-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .ticker-wrapper {
            display: flex;
            width: max-content;
            animation: ticker-scroll 35s linear infinite;
        }
        .ticker-wrapper:hover { animation-play-state: paused; }

        /* Glassmorphism & Effects */
        .glass-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            border-bottom: 2px solid transparent;
            border-image: linear-gradient(to right, #dc2626, #f87171, #dc2626);
            border-image-slice: 1;
        }

        .premium-shadow {
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
        }

        .red-glow-btn {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .red-glow-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px -6px rgba(220, 38, 38, 0.4);
        }

        .nav-item-link {
    position: relative;
    color: var(--deep-slate);
    font-weight: 600;
    font-size: 0.95rem;
    padding-bottom: 6px;
    transition: color 0.3s ease;
}

.nav-item-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #dc2626, #f87171, #dc2626);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.nav-item-link:hover {
    color: var(--primary-red);
}

.nav-item-link:hover::after {
    width: 100%;
}
/* Dark Premium Divider */
.group\/item {
    position: relative;
}

.group\/item::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1.5px;
    background: linear-gradient(
        to right,
        rgba(15, 23, 42, 0),
        rgba(15, 23, 42, 0.35),
        rgba(220, 38, 38, 0.6),
        rgba(15, 23, 42, 0.35),
        rgba(15, 23, 42, 0)
    );
}

/* Last item remove */
.group\/item:last-child::after {
    display: none;
}
/* ===== WHITE-RED SHINE LINE ===== */
.pulse-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #0a0a0b; /* Match your BG */
    padding: 20px 0;
    margin: 0;
}
.pulse-line {
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
.pulse-icon {
    color: #d4af37;
    margin: 0 20px;
    font-size: 20px;
    animation: pulse-glow 2s infinite;
}
/* ===== DARK RED-WHITE SHINE LINE ===== */
.shine-line {
    height: 2px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,0,0,0.6),
        rgba(255,255,255,0.6),
        rgba(255,0,0,0.6),
        transparent
    );
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(255,0,0,0.5);
}

.shine-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,1),
        transparent
    );
    animation: shine 2s infinite;
    filter: blur(1.5px);
}

@keyframes shine {
    0% { left: -30%; }
    100% { left: 130%; }
}
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.animate-marquee {
    animation: marquee 12s linear infinite;
}
/* ===== HERO ===== */
/* Main Wrapper */
        .hero-slider {
            width: 100%;
            height: 430px; /* Ref height */
            position: relative;
            overflow: hidden;
            background-color: #000;
        }

        /* Fixed Background Layer */
        .slider-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
             background: url('../images/slider-back.png') no-repeat center center;
            background-size: cover;
            filter: brightness(0.4); /* Background ko dark kiya taaki text chamke */
            z-index: 1;
        }

        /* Slides Wrapper */
        .slide {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10%;
            opacity: 0;
            visibility: hidden;
            transition: all 0.8s ease-in-out;
            z-index: 2;
        }

        .slide.active {
            opacity: 1;
            visibility: visible;
        }

        /* Text Content (Left) */
        .slide-text {
            flex: 1;
            max-width: 600px;
            transform: translateX(-50px);
            transition: 0.8s all 0.3s ease;
        }
        .active .slide-text { transform: translateX(0); }

        .slide-text h1 {
            color: var(--gold);
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 20px;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        }

        .slide-text p {
            color: #fff;
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        /* Button Styles */
        .btn-group { display: flex; gap: 15px; }
        .btn-gold {
            background: linear-gradient(180deg, #e5c07b, #b58d3e);
            color: #000;
            padding: 14px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 800;
            text-transform: uppercase;
            box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
        }
        .btn-outline {
            border: 2px solid #004d40;
            color: white;
            padding: 14px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
        }

        /* Floating Image Layer (Right) */
        .slide-image {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            transform: scale(0.8);
            transition: 0.8s all 0.5s ease;
        }
        .active .slide-image { transform: scale(1); }

        .slide-image img {
            max-width: 500px;
            filter: drop-shadow(0 0 20px rgba(0,255,204,0.3));
            animation: float 4s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* Navigation Dots */
        .dots-nav {
            position: absolute;
            bottom: 30px;
            left: 10%;
            display: flex;
            gap: 12px;
            z-index: 10;
        }
        .dot {
            width: 12px; height: 12px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            cursor: pointer;
        }
        .dot.active {
            background: var(--gold);
            width: 40px;
            border-radius: 20px;
        }

    /* ===== TABLET (992px ↓) ===== */
@media (max-width: 992px) {
    .slide {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .slide-text h1 {
        font-size: 2.2rem;
    }

    .slide-image img {
        max-width: 320px;
        margin-top: 25px;
    }

    .btn-group {
        justify-content: center;
        flex-wrap: wrap;
    }
}


/* ===== MOBILE (768px ↓) ===== */
@media (max-width: 768px) {
    .slide {
        padding-top: 40px;
    }
    .slide-text h1 {
        font-size: 1.8rem;
    }

    .slide-text p {
        font-size: 0.95rem;
        padding: 0 10px;
    }

    .slide-image img {
        max-width: 260px;
    }

    .btn-group a {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
}


/* ===== SMALL MOBILE (576px ↓) ===== */
@media (max-width: 576px) {
    .slide {
        padding-top: 30px;
    }
    .slide-text h1 {
        font-size: 1.5rem;
    }

    .slide-text p {
        font-size: 0.85rem;
    }

    .slide-image img {
        max-width: 220px;
    }

    .btn-group {
        flex-direction: column;
        gap: 10px;
    }

    .btn-group a {
        width: 100%;
        text-align: center;
    }
}

/* BUTTON OUTLINE */
.btn-outline-custom{
    border:1px solid #00ffd5;
    color:#00ffd5;
    border-radius:25px;
}
.btn-outline-custom:hover{
    background:#00ffd5;
    color:#000;
}
/* BUTTON */
.btn-gold{
    background:linear-gradient(45deg,#f2d98a,#b8902e);
    border:none;
    border-radius:25px;
    box-shadow:0 0 15px rgba(242,217,138,0.6);
}
.btn-gold:hover{
    box-shadow:0 0 30px rgba(242,217,138,1);
}
/* DIVIDER */
.divider{
    height:1px;
    width:90%;
    margin:40px auto;
    background:linear-gradient(to right,transparent,#00ffd5,transparent);
}
.full-width-divider-strip {
    width: 100%;
    background: #1a1a1c; /* Slightly different from main BG to show separation */
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    overflow: hidden;
    white-space: nowrap;
    padding: 15px 0;
    margin: 0; /* Gap khatam karne ke liye */
    display: flex;
    align-items: center;
}

.scrolling-content {
    display: flex;
    animation: scroll-left 25s linear infinite;
}

.scrolling-content span {
    color: #d4af37; /* Gold Text */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.scrolling-content i {
    font-size: 18px;
    color: #ffffff;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/*cards first section*/

/* Section Background */
.features-section {
    background: #fffafa; /* Extremely light red tint for premium feel */
    padding: 80px 0;
}

/* Title Styling */
.section-title {
    font-weight: 800;
    font-size: 32px;
    color: #b91c1c; /* Deep Red */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

/* Red & White Card Base */
.feature-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 45px 30px;
    text-align: center;
    width: 100%;
    border: 1px solid #fee2e2; /* Light Red Border */
    box-shadow: 0 10px 20px rgba(185, 28, 28, 0.03);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

/* Hover Effect - Red Glow */
.feature-card:hover {
    transform: translateY(-15px);
    border-color: #ef4444; /* Bright Red Border on Hover */
    box-shadow: 0 25px 40px rgba(239, 68, 68, 0.15);
}

/* Red Shine Animation */
.feature-card .shine {
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-30deg);
}

.feature-card:hover .shine {
    animation: red-shine 0.7s ease-in-out;
}

@keyframes red-shine {
    100% { left: 150%; }
}

/* Icon Wrapper - Red Accents */
.feature-icon-wrapper {
    background: #fef2f2; /* Lightest Red */
    width: 85px;
    height: 85px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card:hover .feature-icon-wrapper {
    background: #dc2626; /* Solid Red on Hover */
    transform: scale(1.15) rotate(10deg);
    border-color: #fee2e2;
}

/* Image/Icon logic */
.custom-feature-img {
    width: 42px;
    height: auto;
    transition: 0.4s;
}

/* Image turns white when background turns Red */
.feature-card:hover .custom-feature-img {
    filter: brightness(0) invert(1);
}

/* Typography Settings */
.feature-card h5 {
    font-weight: 700;
    font-size: 21px;
    color: #1f2937; /* Dark Gray for readability */
    margin-bottom: 12px;
    transition: 0.3s;
}

.feature-card:hover h5 {
    color: #dc2626; /* Heading turns Red on hover */
}

.feature-card p {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive optimization */
@media (max-width: 768px) {
    .feature-card {
        padding: 35px 20px;
    }
}

/* Animated Red Border */
.card-border {
    position: relative;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(120deg, #ff0000, #ff4d4d, #ff0000);
    background-size: 300% 300%;
    animation: borderMove 5s linear infinite;
}
@keyframes borderMove {
    0% {background-position: 0%}
    100% {background-position: 300%}
}

/* Dark Card */
.card-inner {
    background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    transition: 0.4s;
}

/* Hover */
.card-inner:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 25px 70px rgba(255, 0, 0, 0.4);
}

/* Glow Light */
.glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,0,0,0.25), transparent);
    top: -50px;
    right: -50px;
    filter: blur(40px);
}

/* Shine */
.shine {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -100%;
    left: -100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: rotate(25deg);
    transition: 0.8s;
}
.group:hover .shine {
    top: 100%;
    left: 100%;
}

/* IMAGE STYLE (MAIN FOCUS) */
.feature-img {
    width: 70px;
    margin: auto;
    filter: drop-shadow(0 0 15px rgba(255,0,0,0.6));
    transition: 0.4s;
}
.group:hover .feature-img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 25px rgba(255,0,0,1));
}

/* TEXT */
.title {
    color: #ffffff;
    font-weight: 700;
    margin-top: 12px;
}
.desc {
    color: #aaaaaa;
    font-size: 14px;
}

/* PARALLAX BG */
.parallax {
    background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)),
                url('https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?q=80&w=1400&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* MOBILE FIX */
@media (max-width:768px){
    .parallax {
        background-attachment: scroll;
    }
}

/* CARD (SAME SIZE STYLE) */
.ks-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid rgba(255,0,0,0.15);
    transition: 0.25s;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* HOVER */
.ks-card:hover {
    border-color: #ff0000;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(255,0,0,0.12);
}

/* ICON LEFT */
.ks-icon {
    width: 30px;
    flex-shrink: 0;
}

/* TEXT RIGHT */
.ks-text {
    line-height: 1.1;
}

.ks-red {
    color: #e60023;
    font-weight: 600;
    font-size: 11px;
}

.ks-dark {
    color: #111;
    font-weight: 700;
    font-size: 12px;
}

.premium-service-card{
    position:relative;
    padding:30px 18px;
    border-radius:28px;
    overflow:hidden;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(18px);
    text-align:center;
    transition:all .45s ease;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.08),
      0 10px 30px rgba(0,0,0,0.35);
}

.premium-service-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,
      rgba(255,255,255,0.12),
      transparent,
      rgba(239,68,68,0.08));
    opacity:0;
    transition:.5s;
}

.premium-service-card:hover{
    transform:translateY(-12px) scale(1.03);
    border-color:rgba(239,68,68,0.4);
    box-shadow:
      0 25px 50px rgba(239,68,68,0.18),
      inset 0 1px 1px rgba(255,255,255,0.12);
}

.premium-service-card:hover::before{
    opacity:1;
}

.premium-icon-wrap{
    width:78px;
    height:78px;
    margin:auto;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    background:
      linear-gradient(145deg,#1b1b1b,#0b0b0b);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:
      inset 0 2px 6px rgba(255,255,255,0.08),
      0 10px 25px rgba(0,0,0,.4);
    transition:.45s;
}

.premium-icon-wrap::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:24px;
    padding:1px;
    background:linear-gradient(135deg,#ef4444,#7f1d1d,#ef4444);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
}

.premium-icon-wrap i{
    font-size:30px;
    color:#ff4d4d;
    text-shadow:0 0 20px rgba(239,68,68,0.6);
    transition:.45s;
}

.premium-service-card:hover .premium-icon-wrap{
    transform:rotateY(180deg);
    box-shadow:
      0 0 40px rgba(239,68,68,0.35),
      inset 0 2px 8px rgba(255,255,255,.12);
}

.premium-service-card:hover .premium-icon-wrap i{
    transform:rotateY(180deg) scale(1.1);
    color:#fff;
}

.premium-service-card h3{
    color:#fff;
    font-size:17px;
    font-weight:800;
    margin-top:22px;
    letter-spacing:.3px;
}

.premium-service-card p{
    color:#9ca3af;
    font-size:12px;
    margin-top:8px;
    line-height:1.5;
}

.sos-card{
    border-color:rgba(239,68,68,0.35);
    background:
      linear-gradient(180deg,
      rgba(127,29,29,.35),
      rgba(20,20,20,.95));
}

.pulse-red{
    animation:pulseRed 2s infinite;
}

@keyframes pulseRed{
    0%{
        box-shadow:0 0 0 0 rgba(239,68,68,.7);
    }
    70%{
        box-shadow:0 0 0 20px rgba(239,68,68,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(239,68,68,0);
    }
}

/* MOBILE */
@media(max-width:768px){

  .premium-service-card{
      padding:24px 14px;
      border-radius:22px;
  }

  .premium-icon-wrap{
      width:65px;
      height:65px;
      border-radius:18px;
  }

  .premium-icon-wrap i{
      font-size:24px;
  }

  .premium-service-card h3{
      font-size:14px;
  }

  .premium-service-card p{
      font-size:11px;
  }

}

/* PARALLAX BACKGROUND */
.counter-parallax {
    position: relative;
    background-image: url('https://images.unsplash.com/photo-1591696205602-2f950c417cb9?q=80&w=1400&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* DARK LAYER */
.counter-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25); /* halki dark layer */
    z-index: 0;
}

/* CONTENT ABOVE OVERLAY */
.counter-content {
    position: relative;
    z-index: 10;
}

/* MOBILE FIX */
@media (max-width:768px){
    .counter-parallax {
        background-attachment: scroll;
    }
}

/* COUNTER BOX */
.counter-box {
    background: rgba(0,0,0,0.6); /* darker solid for visible contrast */
    border: 1px solid rgba(255,0,0,0.6);
    border-radius: 14px;
    padding: 18px;
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: 0.3s;
}

/* HOVER EFFECT */
.counter-box:hover {
    transform: translateY(-4px);
    border-color: #ff0000;
    box-shadow: 0 8px 25px rgba(255,0,0,0.4);
}

/* ICON LEFT */
.icon-wrap img {
    width: 40px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,0,0,0.7));
}

/* TEXT RIGHT */
.counter-text {
    display: flex;
    flex-direction: column;
}

/* NUMBER */
.counter {
    font-size: 26px;
    font-weight: bold;
    color: #ff3b3b;
    line-height: 1;
}

/* LABEL */
.counter-label {
    font-size: 14px;
    color: #fff;
}

/* RESPONSIVE */
@media (min-width:768px){
    .counter {
        font-size: 28px;
    }
}

/* ===== STEP NUMBER ===== */
.step-num{
    position:absolute;
    top:-10px;
    right:-10px;
    background:#2563eb;
    color:white;
    width:35px;
    height:35px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}
/* ===== IMAGE CARD ===== */
.img-card{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 30px rgba(0,0,0,0.1);
    transition:0.4s;
}
.img-card:hover{
    transform:scale(1.05);
}

/*services*/
/* ===== BACKGROUND ICONS ===== */
.sqr-bg-animate{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.sqr-bg-icon{
    position:absolute;
    font-size:28px;
    color:#ff2e2e;
    opacity:0.15;
    animation:sqr-moveX 14s linear infinite;
}

.sqr-bg-icon.zoom{
    animation:sqr-zoomFloat 5s ease-in-out infinite;
}

@keyframes sqr-moveX{
    0%{transform:translateX(-100px)}
    100%{transform:translateX(110vw)}
}

@keyframes sqr-zoomFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-25px) scale(1.2)}
}

/* ===== HEADING ===== */
.sqr-main-h2{
    font-size:40px;
    font-weight:900;
}
.sqr-main-h2 span{color:#ff2e2e;}
.sqr-main-h2 strong{color:#111;}

.sqr-shine-line{
    height:4px;
    width:140px;
    margin:14px auto;
    border-radius:10px;
    background:linear-gradient(90deg,#ff2e2e,#ffffff,#ff2e2e);
}

/* ===== CARD ===== */
.sqr-card{
    background:rgba(255,255,255,0.9);
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    position:relative;
    overflow:hidden;
    transition:0.4s;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

.sqr-card::before{
    content:'';
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:20px;
    background:linear-gradient(120deg,#ff2e2e,#ffffff,#ff2e2e);
    background-size:200% 200%;
    animation:sqr-borderMove 5s linear infinite;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

@keyframes sqr-borderMove{
    0%{background-position:0%}
    100%{background-position:200%}
}

.sqr-card:hover{
    transform:translateY(-12px) scale(1.04);
    box-shadow:0 20px 50px rgba(255,0,0,0.15);
}

/* ===== ICON ===== */
.sqr-icon-box{
    width:75px;
    height:75px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:#fff;
    background:linear-gradient(145deg,#ff2e2e,#8b0000);
    position:relative;
    z-index:1;
}

.sqr-icon-box::after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    border:2px solid rgba(255,46,46,0.4);
    animation:sqr-ringPulse 2s infinite;
}

.sqr-icon-box::before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    border:2px solid rgba(255,46,46,0.2);
    animation:sqr-ringPulse2 2.5s infinite;
}

@keyframes sqr-ringPulse{
    0%{transform:scale(1);opacity:0.6}
    70%{transform:scale(1.6);opacity:0}
    100%{opacity:0}
}

@keyframes sqr-ringPulse2{
    0%{transform:scale(1);opacity:0.4}
    70%{transform:scale(2);opacity:0}
    100%{opacity:0}
}

.sqr-card:hover .sqr-icon-box{
    transform:scale(1.1);
}

/* ===== TEXT ===== */
.sqr-card-title{
    font-size:19px;
    font-weight:700;
    color:#111;
    margin-top:15px;
}
.sqr-card-text{
    font-size:14px;
    color:#555;
}

.sqr-badge{
    background:#ff2e2e;
    color:#fff;
    padding:6px 16px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

@media(max-width:768px){
    .sqr-main-h2{font-size:28px}
}
/* ===== SECTION BACKGROUND ===== */
.sqr-guide-section{
    background: linear-gradient(135deg,#f8fbff,#eef3ff);
    position: relative;
    overflow: hidden;
}

/* soft floating shapes */
.sqr-guide-section::before,
.sqr-guide-section::after{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    background:radial-gradient(circle, rgba(255,0,0,0.08), transparent);
    border-radius:50%;
    z-index:0;
}

.sqr-guide-section::before{
    top:-100px;
    left:-100px;
}

.sqr-guide-section::after{
    bottom:-120px;
    right:-100px;
}

/* container fix */
.sqr-guide-container{
    position:relative;
    z-index:1;
}

/* ===== TITLE ===== */
.sqr-guide-title{
    font-size:36px;
    font-weight:900;
    color:#111;
}

/* ===== CARD ===== */
.sqr-guide-card{
    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    transition:0.4s;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    position:relative;
    overflow:hidden;
}

.sqr-guide-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(255,0,0,0.12);
}

/* ===== ICON CENTER DESIGN ===== */
.sqr-guide-icon{
    width:85px;
    height:85px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    background:linear-gradient(145deg,#ff2e2e,#a80000);
    position:relative;
    z-index:1;
}

/* rotating ring */
.sqr-guide-icon::before{
    content:'';
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    border:2px dashed rgba(255,46,46,0.4);
    animation:sqr-rotateRing 8s linear infinite;
}

/* glow pulse ring */
.sqr-guide-icon::after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    border:2px solid rgba(255,46,46,0.3);
    animation:sqr-pulseRing 2s infinite;
}

/* animations */
@keyframes sqr-rotateRing{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@keyframes sqr-pulseRing{
    0%{transform:scale(1);opacity:0.6}
    70%{transform:scale(1.5);opacity:0}
    100%{opacity:0}
}

/* icon hover boost */
.sqr-guide-card:hover .sqr-guide-icon{
    transform:scale(1.1);
}

/* responsive */
@media(max-width:768px){
    .sqr-guide-title{
        font-size:26px;
    }
}

/* multi ripple effect */
.sqr-ripple span{
    position:absolute;
    inset:0;
    border-radius:9999px;
    border:2px solid rgba(255,0,0,0.4);
    animation:ripple 2.5s linear infinite;
}

.sqr-ripple span:nth-child(2){ animation-delay:0.5s; }
.sqr-ripple span:nth-child(3){ animation-delay:1s; }
.sqr-ripple span:nth-child(4){ animation-delay:1.5s; }

@keyframes ripple{
    0%{transform:scale(1);opacity:0.6;}
    70%{transform:scale(2.2);opacity:0;}
    100%{opacity:0;}
}
/* ROAD MOVE */
@keyframes myqr-road-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.myqr-road-animate {
    display:flex;
    width:200%;
    animation: myqr-road-move 16s linear infinite;
}

/* ROAD */
.myqr-road {
    background:#2b2b2b;
    position:relative;
    overflow:hidden;
    height:180px;
}

/* CENTER DASH LINE */
.myqr-road::before {
    content:'';
    position:absolute;
    width:100%;
    height:3px;
    top:50%;
    transform:translateY(-50%);
    background: repeating-linear-gradient(
        to right,
        white 0px,
        white 30px,
        transparent 30px,
        transparent 60px
    );
    opacity:0.5;
}

/* TOP FADE */
.myqr-road::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:60px;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    z-index:2;
}

/* BOTTOM FADE */
.myqr-road-fade-bottom {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40px;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    z-index:2;
}

/* DASHED BORDERS */
.myqr-road-border-top {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background: repeating-linear-gradient(
        90deg,
        white 0px,
        white 10px,
        transparent 10px,
        transparent 20px
    );
    animation: myqr-border-top-move 2s linear infinite;
}

.myqr-road-border-bottom {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:6px;
    background: repeating-linear-gradient(
        90deg,
        white 0px,
        white 10px,
        transparent 10px,
        transparent 20px
    );
    animation: myqr-border-bottom-move 2s linear infinite;
}

/* OPPOSITE MOTION */
@keyframes myqr-border-top-move {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}

@keyframes myqr-border-bottom-move {
    0% { background-position: 40px 0; }
    100% { background-position: 0 0; }
}

/* FEATURE STRIP */
.myqr-feature-strip {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:95%;
    z-index:10;
    overflow:hidden;
}

.myqr-feature-track {
    display:flex;
    width:max-content;
    animation: myqr-feature-scroll 30s linear infinite;
}

@keyframes myqr-feature-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* FEATURE CARD */
.myqr-feature-card {
    display:flex;
    align-items:center;
    gap:8px;
    background: rgba(255, 0, 0, 0.08);
    border:1px solid rgba(255, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    border-radius:12px;
    padding:8px 16px;
    margin:8px 15px;
    min-width:240px;
    color:#ffb3b3;
    font-size:13px;
    transition: all 0.3s ease;
    pointer-events:auto;
}

/* HOVER EFFECT */
.myqr-feature-card:hover {
    transform: scale(1.08);
    background: rgba(255,0,0,0.2);
    border-color:#ff3c3c;
    box-shadow: 0 0 15px rgba(255,0,0,0.4);
}

/* ICON */
.myqr-feature-card img {
    width:32px;
}
@keyframes scanline {
            0% { transform: translateY(-100%); opacity: 0; }
            50% { opacity: 0.3; }
            100% { transform: translateY(100%); opacity: 0; }
        }
        @keyframes pulse-red {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 0.5; }
        }
        .bg-animate {
            position: absolute;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #dc2626, transparent);
            animation: scanline 8s infinite linear;
            z-index: 5;
        }
        .glow-dot {
            position: absolute;
            background: #ef4444;
            filter: blur(4px);
            border-radius: 50%;
            animation: pulse-red 4s infinite ease-in-out;
            z-index: 5;
        }

    /* 1. Breathing border glow on focus */
    @keyframes border-glow {
      0%, 100% { border-color: rgba(220, 38, 38, 0.4); box-shadow: 0 0 10px rgba(220, 38, 38, 0.3); }
      50% { border-color: rgba(220, 38, 38, 1); box-shadow: 0 0 25px rgba(220, 38, 38, 0.6); }
    }
    .animate-glow-focus:focus {
      animation: border-glow 2s infinite ease-in-out;
    }

    /* 2. Deep gradient for panels */
    .premium-gradient-dark {
      background: linear-gradient(135deg, #101010 0%, #1a0505 100%);
    }
    .premium-gradient-light {
      background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);
    }

    /* 3. Shine effect on hover for buttons/cards */
    .shine-effect {
      position: relative;
      overflow: hidden;
    }
    .shine-effect::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
      transform: rotate(45deg);
      transition: 0.7s;
    }
    .shine-effect:hover::after {
      left: 100%;
      top: 100%;
    }

    /* 4. Complex Zig-Zag Border for Left Panel - Using pseudo-elements */
    .zigzag-border-panel {
      position: relative;
      overflow: hidden; /* Important for clean edges */
    }

    /* SVG Zig-Zag as mask/border-image could work, but CSS pseudo-elements are often more controllable for a complex panel boundary. Here's a geometric approach using linear gradients and clip-path. */
    .zigzag-border-panel::before {
      content: '';
      position: absolute;
      top: 0;
      right: -10px; /* Slight offset to show the zig-zag */
      bottom: 0;
      width: 20px; /* Width of the border element */
      background: linear-gradient(135deg, #dc2626 25%, transparent 25%), 
                  linear-gradient(225deg, #dc2626 25%, transparent 25%),
                  linear-gradient(45deg, #101010 25%, transparent 25%),
                  linear-gradient(315deg, #101010 25%, transparent 25%);
      background-size: 10px 10px; /* Size of the zig-zag pattern */
      background-repeat: repeat-y; /* Stack vertically */
      z-index: 1; /* Place above panel background, below content */
    }
    
    /* Ensuring content is layered correctly */
    .zigzag-content {
      position: relative;
      z-index: 2;
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
      .zigzag-border-panel::before {
        display: none; /* Remove vertical zig-zag on smaller screens where panels stack */
      }
    }
/* products details css*/
  .zoom-wrapper {
    position: relative;
    overflow: hidden;
    background: white;
    border-radius: 12px;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    height: 450px;
  }

  #mainImage {
    transition: transform 0.1s ease-out;
    transform-origin: center center;
    width: 100%;
    height: auto;
    display: block;
  }

  .thumb {
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
    width: 70px;
    height: 70px;
    object-fit: cover;
  }
  .thumb.active { border-color: red; }

  .bundle-card {
    background: linear-gradient(135deg,#111,#333);
    color: white;
    border-radius: 14px;
    padding: 15px;
    flex: 1;
    cursor: pointer;
    transition: 0.3s;
  }
  .bundle-card.active-bundle { border: 2px solid red; }

  /* ACCORDION STYLING */
  .accordion-item {
    border-radius: 40px;
    background: #e5e7eb;
    margin-bottom: 10px;
    overflow: hidden;
    transition: 0.3s;
  }
  .accordion-header {
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
  }
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #f9fafb;
    padding: 0 25px;
  }
  .accordion-item.open .accordion-content {
    max-height: 200px;
    padding: 15px 25px;
  }
  .accordion-item.open {
    background: #d1d5db;
  }
  /* Tab Styling */
    .tab-btn {
        padding: 15px 30px;
        font-weight: 600;
        color: #666;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
        white-space: nowrap;
    }
    .tab-btn:hover {
        color: #ef4444;
        background: #fff5f5;
    }
    .active-tab {
        color: #ef4444;
        border-bottom-color: #ef4444;
    }

    /* Animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
        animation: fadeIn 0.4s ease-out forwards;
    }

    /*card-products-list*/
    .glow-card {
          border-radius: 16px;
          background: #fff;
          border: 1px solid #e5e5e5;
          transition: all 0.25s ease;
        }
        .glow-card:hover {
          border-color: #ef4444;
          box-shadow:
            0 0 0 2px rgba(239,68,68,0.15),
            0 8px 20px rgba(0,0,0,0.06);
        }
        body.no-scroll { overflow: hidden; }
        .arrow-btn { width: 32px; height: 32px; }
        
        /* Naya Price Section Styling */
        .price-tag-container {
          background: linear-gradient(145deg, #ffffff, #f9fafb);
          border: 1px solid #fee2e2; /* Light red border */
          border-radius: 12px;
          padding: 12px;
          position: relative;
          overflow: hidden;
          box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
        }
        .price-tag-container::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 4px;
          background: #ef4444;
        }
/* =========================================
           Unique Scoped CSS with Parallax Effect
           ========================================= */
        
        /* 1. Parallax Container */
        .ms-parallax-section {
            position: relative;
            min-height: 60vh; /* Adjust height as needed */
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            
            /* Parallax Core Logic (Pure CSS) */
            background-image: url('../images/background-image.png'); /* Safety themed image */
            background-attachment: fixed; /* Crucial for Parallax */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* 2. Dark Overlay over the background image */
        .ms-parallax-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0.75, 0.75, 0.75, 0.75); /* Darkens the image for text clarity */
            z-index: 1;
        }

        /* Ensure content sits above the overlay */
        .ms-parallax-content {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        /* 3. Ultra-Premium Glass Cards */
        .ms-premium-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 45px 25px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .ms-premium-card:hover {
            transform: translateY(-15px) scale(1.02);
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(255, 0, 0, 0.5); /* Brand red hover border */
            box-shadow: 0 25px 50px rgba(255, 0, 0, 0.15);
        }

        /* 4. Icon & Moving Ring Animation */
        .ms-icon-scene {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ms-icon-box {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #ff1a1a, #990000); /* Premium Red Gradient */
            border-radius: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            position: relative;
            z-index: 5;
            box-shadow: 0 10px 20px rgba(255, 0, 0, 0.4);
        }

        /* The Moving/Floating Ring */
        .ms-floating-ring {
            position: absolute;
            width: 130%;
            height: 130%;
            border: 2px solid rgba(255, 50, 50, 0.3);
            border-radius: 50%;
            animation: msOrbitAndFloat 5s infinite ease-in-out;
            pointer-events: none;
            z-index: 1;
        }

        /* Small glowing dot on the ring */
        .ms-floating-ring::after {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            width: 10px;
            height: 10px;
            background: #ff3333;
            border-radius: 50%;
            box-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000;
        }

        /* Complex animation: floating up/down + slight rotation */
        @keyframes msOrbitAndFloat {
            0% {
                transform: translateY(-10px) rotate(0deg) scale(1);
                opacity: 0.5;
            }
            50% {
                transform: translateY(10px) rotate(180deg) scale(1.08);
                opacity: 1;
                border-color: rgba(255, 0, 0, 0.6);
            }
            100% {
                transform: translateY(-10px) rotate(360deg) scale(1);
                opacity: 0.5;
            }
        }

        /* 5. Typography */
        .ms-card-title {
            color: #ffffff;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
            font-size: 1.5rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .ms-card-desc {
            color: #d0d0d0;
            font-size: 1rem;
            line-height: 1.6;
            font-weight: 300;
        }

        /* Fallback for mobile devices where background-attachment: fixed often fails */
        @media (max-width: 1024px) {
            .ms-parallax-section {
                background-attachment: scroll;
            }
        }        
        /*checkout*/
 /* CARD */
.glass {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* INPUT */
.input-box {
  position: relative;
}
.input {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 11px 12px 11px 38px;
  font-size: 14px;
}
.input:focus {
  border-color: var(--red-main);
  box-shadow: 0 0 0 3px var(--red-glow);
  outline: none;
}

/* ICON INSIDE INPUT */
.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}

/* PAYMENT */
.pay {
  border: 1px solid #eee;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.25s;
}
.pay:hover {
  border-color: var(--red-main);
  background: #fff1f2;
  transform: translateY(-2px);
}

/* BUTTON */
.btn {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  padding: 14px;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.btn:hover {
  box-shadow: 0 10px 20px var(--red-glow);
}
        .no-scroll { overflow: hidden; }
    #cart-items::-webkit-scrollbar { width: 4px; }
    #cart-items::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    
    /*student managment system*/
    
    /* =========================
HEADER
========================= */

.ms-header{
    width:100%;
    overflow:hidden;
}

.ms-header img{
    width:100%;
    display:block;
}

/* =========================
HERO
========================= */

.ms-hero{
    position:relative;
    padding:110px 20px;
    text-align:center;
    overflow:hidden;

    background:
    linear-gradient(135deg,#ffffff,#fff5f5,#ffe1e1);
}

.ms-hero::before{
    content:'';
    position:absolute;
    width:450px;
    height:450px;
    background:#ff000015;
    border-radius:50%;
    top:-200px;
    left:-100px;
    filter:blur(100px);
}

.ms-hero::after{
    content:'';
    position:absolute;
    width:450px;
    height:450px;
    background:#ff000010;
    border-radius:50%;
    bottom:-200px;
    right:-100px;
    filter:blur(100px);
}

.ms-hero-content{
    position:relative;
    z-index:5;
}

.ms-hero h1{
    font-size:4rem;
    color:#c10000;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;
}

.ms-hero p{
    max-width:850px;
    margin:auto;
    color:#555;
    font-size:1.1rem;
    line-height:1.8;
}
.ms-hero-buttons-sms{
            margin-top:35px;
            display:flex;
            justify-content:center;
            flex-wrap:wrap;
            gap:15px;
        }

.ms-hero-buttons-sms a{
            text-decoration:none;
            padding:14px 28px;
            color: #c10000;
            border-radius:50px;
            font-weight:600;
            transition:0.3s;
        }
.ms-btn-wrap{
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.ms-btn{
    padding:15px 35px;
    border-radius:60px;
    text-decoration:none;
    transition:0.4s;
    font-weight:600;
}

.ms-btn-primary{
    background:linear-gradient(135deg,#ff0000,#990000);
    color:#fff;
    box-shadow:0 0 30px #ff000055;
}

.ms-btn-primary:hover{
    transform:translateY(-5px);
}

.ms-btn-outline{
    border:2px solid #c10000;
    color:#c10000;
}

.ms-btn-outline:hover{
    background:#c10000;
    color:#fff;
}

/* =========================
COMMON
========================= */

.ms-main{
    max-width:1300px;
    margin:auto;
    padding:90px 20px;
}

.ms-title{
    text-align:center;
    margin-bottom:60px;
}

.ms-title h2{
    font-size:2.7rem;
    color:#c10000;
    margin-bottom:20px;
    position:relative;
    display:inline-block;
}

.ms-title h2::after{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-12px;

    width:120px;
    height:5px;

    border-radius:30px;

    background:
    linear-gradient(to right,#ff0000,#ff9a9a,#ff0000);
}

.ms-title p{
    color:#666;
}

/* =========================
ICON RING DESIGN
========================= */

.ms-icon-wrap{
    position:relative;
    width:120px;
    height:120px;
    margin:auto auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ms-ring{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(255,0,0,0.15);
    animation:msRotate 8s linear infinite;
}

.ms-ring1{
    width:120px;
    height:120px;
}

.ms-ring2{
    width:95px;
    height:95px;
    animation-direction:reverse;
}

.ms-ring3{
    width:70px;
    height:70px;
}

.ms-ring::before{
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    background:#ff0000;
    border-radius:50%;
    top:-5px;
    left:50%;
    transform:translateX(-50%);
    box-shadow:0 0 15px #ff0000;
}

@keyframes msRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.ms-main-icon{
    width:70px;
    height:70px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    linear-gradient(135deg,#ff0000,#8a0000);

    color:#fff;
    font-size:1.8rem;

    position:relative;
    z-index:5;

    box-shadow:
    0 0 20px #ff000055,
    0 0 35px #ff000044;

    animation:msPulse 2s infinite;
}

@keyframes msPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
    }

}

/* =========================
FLOW GRID
========================= */

.ms-flow-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.ms-flow-box{
    background:#fff;
    border-radius:30px;
    padding:35px 25px;
    text-align:center;

    position:relative;
    overflow:hidden;

    border:1px solid #eee;

    transition:0.5s;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05);
}

.ms-flow-box::before{
    content:'';
    position:absolute;
    inset:0;

    border-radius:30px;
    padding:2px;

    background:
    linear-gradient(135deg,#ff0000,#ffffff,#ff0000);

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

.ms-flow-box:hover{
    transform:translateY(-10px);
    box-shadow:0 0 40px #ff000033;
}

.ms-flow-box h4{
    font-size:1.3rem;
    margin-bottom:10px;
}

.ms-flow-box p{
    color:#666;
    font-size:0.95rem;
}

/* =========================
DARK SECTION
========================= */

.ms-dark-section{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(135deg,#111,#1d1d1d,#000);

    border-radius:40px;

    margin-top:70px;
    margin-bottom:70px;
}

/* MOVING ICONS */

.ms-bg-icons{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.ms-bg-icons span{
    position:absolute;
    color:#ffffff10;
    animation:msFloat 18s linear infinite;
}

.ms-bg-icons span i{
    font-size:55px;
}

.ms-bg-icons span:nth-child(1){left:8%;top:100%;}
.ms-bg-icons span:nth-child(2){left:20%;top:120%;}
.ms-bg-icons span:nth-child(3){left:38%;top:130%;}
.ms-bg-icons span:nth-child(4){left:55%;top:115%;}
.ms-bg-icons span:nth-child(5){left:75%;top:140%;}
.ms-bg-icons span:nth-child(6){left:90%;top:120%;}

@keyframes msFloat{

    0%{
        transform:translateY(0) rotate(0deg);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:translateY(-130vh) rotate(360deg);
        opacity:0;
    }

}

/* =========================
CORE GRID
========================= */

.ms-core-grid{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:30px;
}

.ms-core-card{
    background:rgba(255,255,255,0.06);

    border-radius:35px;

    padding:35px;

    backdrop-filter:blur(15px);

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

    text-align:center;

    transition:0.5s;

    position:relative;
    overflow:hidden;
}

.ms-core-card::before{
    content:'';
    position:absolute;
    inset:0;

    border-radius:35px;
    padding:2px;
    background:linear-gradient(135deg,#ff0000,#ffffff,#ff0000);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

.ms-core-card:hover{
    transform:translateY(-10px);
    box-shadow:0 0 40px #ff000044;
}

.ms-core-card h3{
    color:#fff;
    margin-bottom:20px;
    font-size:1.4rem;
}

.ms-core-card ul{
    list-style:none;
}

.ms-core-card ul li{
    color:#eee;
    margin-bottom:14px;
    position:relative;
    padding-left:30px;
    text-align:left;
}

.ms-core-card ul li::before{
    content:'✓';

    position:absolute;
    left:0;
    top:0;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#ff0000;
    color:#fff;

    font-size:11px;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
FEATURE GRID
========================= */

.ms-feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.ms-feature-card{
    background:#fff;
    border-radius:35px;
    padding:35px;

    text-align:center;

    position:relative;
    overflow:hidden;

    border:1px solid #eee;

    transition:0.5s;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05);
}

.ms-feature-card::before{
    content:'';
    position:absolute;
    inset:0;

    border-radius:35px;
    padding:2px;

    background:
    linear-gradient(135deg,#ff0000,#ffffff,#ff0000);

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

.ms-feature-card:hover{
    transform:translateY(-10px);
    box-shadow:0 0 35px #ff000033;
}

.ms-feature-card h3{
    font-size:1.4rem;
    margin-bottom:15px;
}

.ms-feature-card p{
    color:#666;
    line-height:1.8;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

    .ms-hero h1{
        font-size:2.3rem;
    }

    .ms-title h2{
        font-size:2rem;
    }

    .ms-flow-grid,
    .ms-core-grid,
    .ms-feature-grid{
        grid-template-columns:1fr;
    }

}
 /*end sms css*/