.tattoo-video-grid-section {
    background-color: #030303; 
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 66, 52, 0.1);
}

.z-index-2 {
    z-index: 2;
}

/* 2. Typography */
.tattoo-subheading {
    color: #ff4234;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-block;
    border-bottom: 2px solid #ff42349b;
    padding-bottom: 5px;
}

.tattoo-heading {
    font-family: 'Arial', sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gradient-highlight {
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 66, 52, 0.4));
}

.tattoo-intro {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 3. Modern Video Wrapper & Ambient Glow */
.modern-video-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    /* Optional: Entrance animation delays if you add JS scroll reveal */
}

/* Har video ke piche apna individual glow */
.video-glow-backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 66, 52, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    transform: translate(-50%, -50%);
    filter: blur(40px);
    z-index: 1;
    transition: all 0.4s ease;
}

/* 4. The Premium Video Card (Frame) */
.modern-video-card {
    position: relative;
    z-index: 2;
    height: 350px;
    background: #0a0a0a; 
    padding: 10px; /* Bezel size */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Hover Effect: Individual card pops out */
.modern-video-wrapper:hover .modern-video-card {
    transform: translateY(-8px) scale(1.03); 
    box-shadow: 0 25px 45px rgba(0,0,0,0.95), 0 0 20px rgba(255, 66, 52, 0.15);
    border-color: rgba(255, 66, 52, 0.3);
}

.modern-video-wrapper:hover .video-glow-backdrop {
    background: radial-gradient(circle, rgba(255, 66, 52, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(50px);
}

/* 5. Custom Corner Accents (Edgy Vibe) */
.card-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    z-index: 3;
    pointer-events: none; 
    transition: all 0.4s ease;
}

.top-left { top: 0; left: 0; border-top-color: #ff4234; border-left-color: #ff4234; border-top-left-radius: 12px; }
.top-right { top: 0; right: 0; border-top-color: #ff4234; border-right-color: #ff4234; border-top-right-radius: 12px; }
.bottom-left { bottom: 0; left: 0; border-bottom-color: #ff4234; border-left-color: #ff4234; border-bottom-left-radius: 12px; }
.bottom-right { bottom: 0; right: 0; border-bottom-color: #ff4234; border-right-color: #ff4234; border-bottom-right-radius: 12px; }

/* 6. The Video Tag */
.custom-tattoo-video {
    width: 100%;
    /* 16:9 ratio maintain karne ke liye height auto */
    height: 330px;
    aspect-ratio: 16 / 9;
    border-radius: 8px; 
    display: block; 
    object-fit: cover;
    background-color: #000; 
}

/* Controls styling */
video::-webkit-media-controls-panel {
    background: rgba(0, 0, 0, 0.7);
}

/* Responsive Grid Gap Adjustments */
@media (max-width: 991px) {
    .tattoo-heading {
        font-size: 2.2rem;
    }
}
@media (max-width: 576px) {
    /* Mobile ke liye single column aur thoda space kam */
    .tattoo-video-grid-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    .modern-video-card {
        padding: 6px;
    }
}

.piercing-types-section {
    background-color: #030303;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 66, 52, 0.1);
}

.piercing-bg-glow {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 66, 52, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(60px);
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

/* 2. Custom Typography */
.tattoo-subheading {
    color: #ff4234;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-block;
    border-bottom: 2px solid #ff42349b;
    padding-bottom: 5px;
}

.tattoo-heading {
    font-family: 'Arial', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gradient-highlight {
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 66, 52, 0.4));
}

/* 3. Piercing Cards */
.piercing-card {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 16px;
    padding: 40px 25px;
    position: relative;
    height: 100%;
    transition: all 0.4s ease;
    overflow: hidden;
    cursor: crosshair;
}

.piercing-category {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* 4. CSS Custom Piercing Ring Icon (Horseshoe style) */
.piercing-ring-icon {
    width: 45px;
    height: 45px;
    border: 4px solid #444; /* Silver/Steel look */
    border-bottom-color: transparent; /* Open at the bottom */
    border-radius: 50%;
    position: relative;
    margin-bottom: 25px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The two beads on the piercing ring */
.piercing-ring-icon::before, 
.piercing-ring-icon::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 10px;
    height: 10px;
    background: #444;
    border-radius: 50%;
    transition: all 0.5s ease;
}

.piercing-ring-icon::before { left: -2px; }
.piercing-ring-icon::after { right: -2px; }

/* 5. Custom List Items (Glowing Stud Bullets) */
.piercing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.piercing-list li {
    color: #a0a0a0;
    font-size: 0.95rem;
    position: relative;
    padding-left: 25px;
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
}

/* Custom Stud */
.piercing-list li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 6px;
    height: 6px;
    background: #333; /* Default stud color */
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* 6. Card Hover Magic */
.card-glow-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    transition: width 0.5s ease;
}

.piercing-card:hover {
    background: #111111;
    border-color: rgba(255, 66, 52, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.8), 0 0 20px rgba(255, 66, 52, 0.1);
}

.piercing-card:hover .card-glow-line {
    width: 100%; /* Top red line slides in */
}

.piercing-card:hover .piercing-category {
    color: #ff4234; /* Title becomes red */
}

/* Ring rotates and glows on hover */
.piercing-card:hover .piercing-ring-icon {
    border-color: #ff4234;
    border-bottom-color: transparent;
    transform: rotate(25deg); /* Cool rotation effect */
    filter: drop-shadow(0 0 8px rgba(255, 66, 52, 0.5));
}

.piercing-card:hover .piercing-ring-icon::before,
.piercing-card:hover .piercing-ring-icon::after {
    background: #ff4234;
}

/* List studs glow and text moves slightly */
.piercing-card:hover .piercing-list li {
    color: #ffffff;
    transform: translateX(5px);
}

.piercing-card:hover .piercing-list li::before {
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    box-shadow: 0 0 8px #ff4234; /* Stud glows */
}

.soi_about_section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.soi_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.soi_about_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* 2. Image Container & Light Filter/Glow Effects */
.soi_about_img_wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.5s ease-in-out;
}

.soi_about_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Base filter: Slight dark contrast */
    filter: brightness(0.85) contrast(1.05);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

/* --- CURSOR HOVER EFFECT ON IMAGE --- */
.soi_about_img_wrapper:hover {
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.15); /* Soft outer light glow */
    border-color: rgba(255, 255, 255, 0.3);
}

.soi_about_img_wrapper:hover .soi_about_img {
    /* Image Light Filter + Zoom effect on hover */
    filter: brightness(1.15) contrast(1.1) saturate(1.1);
    transform: scale(1.06); 
}

/* 3. List Item Hover Animations */
.soi_about_list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.soi_about_list li {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.soi_about_list li:hover {
    transform: translateX(8px); /* List item slides slightly on hover */
}

.soi_about_list li i {
    font-size: 20px;
    color: rgb(255 0 0 / 64%); /* Accent Checkmark Color */
    background: rgba(255, 51, 102, 0.1);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.soi_about_list li:hover i {
    background: rgb(255 0 0 / 64%);
    color: #ffffff;
    transform: rotate(360deg); /* Icon smooth spin on hover */
}

.soi_about_list li strong {
    display: block;
    color: #ffffff;
    margin-bottom: 3px;
}

/* 4. Responsive Design */
@media (max-width: 991px) {
    .soi_about_grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.soi_about_section {
    position: relative;
    padding: 100px 0;
    background-color: #0a0a0c;
    color: #e2e8f0;
    overflow: hidden;
}

/* Background Glowing Orbs */
.soi_glow_effect {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
    z-index: 0;
}
.soi_glow_1 {
    top: -100px;
    left: -150px;
    background: rgba(255, 51, 102, 0.15);
}
.soi_glow_2 {
    bottom: -100px;
    right: -150px;
    background: rgba(255, 51, 102, 0.08);
}

.soi_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* 2-Column Main Layout */
.soi_about_grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

/* --- Left Image Wrapper & Floating Badge --- */
.soi_about_images {
    position: relative;
}

.soi_about_img_wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgb(255 0 0 / 64%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    background: #121214;
}

.soi_about_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    filter: grayscale(100%) contrast(1.1) brightness(0.9) !important;
    transition: transform .6s ease, filter .6s ease;
}

.soi_about_img_wrapper:hover .soi_about_img {
    transform: scale(1.05);
    filter: grayscale(0%) contrast(1) brightness(1) !important;
}

.soi_about_img_wrapper:hover .soi_about_img {
    transform: scale(1.05);

    /* Original Color */
    filter: none;
}



.soi_img_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(10,10,12,0.85) 100%);
    pointer-events: none;
}

.soi_floating_badge {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(18, 18, 22, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgb(255 0 0 / 27%);
    padding: 14px 22px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 
                0 0 20px rgba(255, 51, 102, 0.2);
}

.soi_badge_num {
    font-size: 36px;
    font-weight: 800;
    color: rgb(255 0 0 / 64%);
    line-height: 1;
}

.soi_badge_text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
}

/* --- Right Content Styling --- */
.soi_section_subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgb(255 0 0 / 64%);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.soi_about_content .bab_h2 {
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.soi_desc_p {
    color: #a0aec0;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.soi_desc_p strong {
    color: #ffffff;
}

/* List Items with Cards Effect */
.soi_about_list {
    list-style: none;
    padding: 0;
    margin: 28px 0 34px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.soi_about_list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgb(255 0 0 / 27%);
    padding: 14px 18px;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.soi_about_list li:hover {
    background: rgba(255, 51, 102, 0.04);
    border-color: rgb(255 0 0 / 64%);
    transform: translateX(4px);
}

.soi_icon_box {
    width: 38px;
    height: 38px;
    background: rgba(255, 51, 102, 0.12);
    border: 1px solid rgb(255 0 0 / 64%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255 0 0 / 64%);
    font-size: 20px;
    flex-shrink: 0;
}

.soi_list_text strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 3px;
}

.soi_list_text p {
    margin: 0;
    color: #8c9ba5;
    font-size: 13.5px;
    line-height: 1.45;
}

.soi_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------
   STATS COUNTER GRID STYLING
--------------------------------------------------- */
.soi_stats_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 70px;
    padding-top: 45px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.soi_stat_card {
    background: rgba(18, 18, 22, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.soi_stat_card:hover {
    transform: translateY(-8px);
    background: rgba(24, 24, 30, 0.9);
    border-color: rgba(255, 51, 102, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 
                0 0 20px rgba(255, 51, 102, 0.15);
}

.soi_stat_number {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soi_stat_plus, .soi_stat_percent {
    color: rgb(255 0 0 / 64%);
    margin-left: 2px;
}

.soi_stat_label {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* --------------------------------------------------
   RESPONSIVE DESIGN
--------------------------------------------------- */
@media (max-width: 991px) {
    .soi_about_grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    
    .soi_stats_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 50px;
    }

    .soi_about_content .bab_h2 {
        font-size: 25px;
    }
}

@media (max-width: 576px) {
    .soi_about_section {
        padding: 65px 0;
    }

    .soi_stats_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .soi_stat_card {
        padding: 20px 12px;
    }

    .soi_stat_number {
        font-size: 32px;
    }

    .soi_stat_label {
        font-size: 12px;
    }

    .soi_floating_badge {
        bottom: 15px;
        right: 15px;
        padding: 10px 16px;
    }

    .soi_badge_num {
        font-size: 28px;
    }
}

.loc_section {
    position: relative;
    padding: 90px 0;
    background-color: #08080a;
    color: #ffffff;
    overflow: hidden;
}

/* Background Ambient Glows */
.loc_glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
}
.loc_glow_left {
    top: 20%;
    left: -150px;
    background: rgb(255 0 0 / 30%);
}
.loc_glow_right {
    bottom: 10%;
    right: -150px;
    background: rgb(255 0 0 / 20%);
}

.loc_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Header Typography */
.loc_header {
    margin-bottom: 40px;
}

.loc_title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 12px;
}

.loc_highlight {
    color: rgb(255 0 0);
    text-shadow: 0 0 20px rgb(255 0 0 / 64%);
}

.loc_subtitle {
    font-size: 15px;
    color: #a0aec0;
    max-width: 620px;
    margin: 0 auto 25px auto;
    line-height: 1.6;
}

/* Location Switcher Tabs */
.loc_tabs {
    display: inline-flex;
    background: rgba(20, 20, 26, 0.8);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.loc_tab_btn {
    background: transparent;
    border: none;
    color: #a0aec0;
    padding: 10px 22px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.loc_tab_btn.active, .loc_tab_btn:hover {
    background: rgb(255 0 0 / 64%);
    color: #ffffff;
    box-shadow: 0 0 20px rgb(255 0 0 / 64%);
}

/* Layout Grid */
.loc_content_wrapper {
    display: none;
}

.loc_content_wrapper.active_loc {
    display: block;
    animation: locFadeIn 0.5s ease forwards;
}

@keyframes locFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.loc_grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr;
    gap: 30px;
    align-items: stretch;
}

/* Left Map Card Styling */
.loc_map_card {
    position: relative;
    background: rgba(18, 18, 24, 0.7);
    border-radius: 20px;
    border: 1px solid rgb(255 0 0 / 64%);
    padding: 15px;
    box-shadow: 0 0 30px rgb(255 0 0 / 25%);
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.loc_iframe {
    width: 100%;
    height: 100%;
    min-height: 330px;
    border: 0;
    border-radius: 12px;
    filter: invert(90%) hue-rotate(180deg) contrast(1.1); /* Dark Map Look */
}

.loc_map_btn_wrap {
    text-align: center;
    padding-top: 15px;
}

.loc_direction_btn {
    display: inline-block;
    border: 2px solid rgb(255 0 0 / 64%);
    color: #ffffff;
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgb(255 0 0 / 10%);
}

.loc_direction_btn:hover {
    background: rgb(255 0 0 / 64%);
    color: #ffffff;
    box-shadow: 0 0 25px rgb(255 0 0 / 64%);
}

/* Right Info Cards Styling */
.loc_info_cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
}

.loc_info_box {
    background: rgba(18, 18, 24, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

.loc_info_box:hover {
    border-color: rgb(255 0 0 / 64%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgb(255 0 0 / 30%);
    transform: translateX(5px);
}

.loc_icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgb(255 0 0 / 64%);
    background: rgb(255 0 0 / 15%);
    color: rgb(255 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.loc_info_text h4 {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.loc_info_text p {
    font-size: 13.5px;
    color: #a0aec0;
    margin: 0;
    line-height: 1.5;
}

.loc_info_text a {
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.loc_info_text a:hover {
    color: rgb(255 0 0);
}

/* --------------------------------------------------
   RESPONSIVE DESIGN (All Devices)
--------------------------------------------------- */
@media (max-width: 991px) {
    .loc_grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .loc_map_card {
        min-height: 380px;
    }
}

@media (max-width: 576px) {
    .loc_section {
        padding: 60px 0;
    }
    .loc_title {
        font-size: 25px;
    }
    .loc_tabs {
        flex-direction: column;
        width: 100%;
        border-radius: 16px;
    }
    .loc_tab_btn {
        justify-content: center;
        width: 100%;
    }
    .loc_info_box {
        padding: 16px 18px;
        gap: 15px;
    }
    .loc_icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .loc_info_text h4 {
        font-size: 15px;
    }
    .loc_info_text p {
        font-size: 12.5px;
    }
}

.frm_section {
    position: relative;
    padding: 90px 0;
    background-color: #08080a;
    color: #ffffff;
    overflow: hidden;
}

/* Ambient Background Glows */
.frm_glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
}
.frm_glow_left {
    top: 15%;
    left: -150px;
    background: rgb(255 0 0 / 25%);
}
.frm_glow_right {
    bottom: 10%;
    right: -150px;
    background: rgb(255 0 0 / 20%);
}

.frm_container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Header Typography */
.frm_header {
    margin-bottom: 40px;
}

.frm_title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 12px;
}

.frm_highlight {
    color: rgb(255 0 0);
    text-shadow: 0 0 20px rgb(255 0 0 / 64%);
}

.frm_subtitle {
    font-size: 15px;
    color: #a0aec0;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Glassmorphism Form Card */
.frm_card_wrapper {
    background: rgba(18, 18, 24, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 0 0 / 64%);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgb(255 0 0 / 20%);
}

.frm_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.frm_full_width {
    grid-column: span 2;
}

/* Floating Label & Inputs Styling */
.frm_group {
    position: relative;
}

.frm_input_wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.frm_icon {
    position: absolute;
    left: 16px;
    color: #a0aec0;
    font-size: 18px;
    transition: color 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.frm_textarea_wrap .frm_icon {
    top: 18px;
}

.frm_input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px 16px 16px 48px;
    color: #ffffff;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
}

.frm_textarea {
    resize: vertical;
    min-height: 120px;
}

/* Floating Label Position */
.frm_label {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 14px;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: transparent;
}

.frm_textarea_wrap .frm_label {
    top: 26px;
}

/* Input Focus & Active Label Animation */
.frm_input:focus,
.frm_input:not(:placeholder-shown) {
    border-color: rgb(255 0 0 / 64%);
    background: rgba(255, 0, 0, 0.02);
    box-shadow: 0 0 15px rgb(255 0 0 / 25%);
}

.frm_input:focus ~ .frm_icon,
.frm_input:not(:placeholder-shown) ~ .frm_icon {
    color: rgb(255 0 0);
}

.frm_input:focus ~ .frm_label,
.frm_input:not(:placeholder-shown) ~ .frm_label {
    top: 0;
    left: 16px;
    font-size: 11px;
    font-weight: 700;
    color: rgb(255 0 0);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: #0d0d12;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Submit Button */
.frm_btn_wrap {
    margin-top: 30px;
    text-align: center;
}

.frm_submit_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgb(255 0 0 / 64%);
    color: #ffffff;
    border: none;
    padding: 14px 40px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgb(255 0 0 / 40%);
}

.frm_submit_btn:hover {
    background: rgb(255 0 0);
    box-shadow: 0 0 30px rgb(255 0 0 / 70%);
    transform: translateY(-2px);
}

.frm_submit_btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.frm_submit_btn:hover i {
    transform: translateX(4px) translateY(-2px);
}

/* --------------------------------------------------
   RESPONSIVE DESIGN (All Devices)
--------------------------------------------------- */
@media (max-width: 768px) {
    .frm_card_wrapper {
        padding: 25px 20px;
    }
    .frm_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .frm_full_width {
        grid-column: span 1;
    }
    .frm_title {
        font-size: 25px;
    }
}


    /* 1. Section Base Styling */
.why-us-section {
    background-color: #030303; /* Extremely dark premium black */
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Optional faint grid texture in background */
.bg-texture {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255, 66, 52, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 66, 52, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
    pointer-events: none;
}

.z-index-2 {
    z-index: 2;
}

/* 2. Typography */
.tattoo-subheading {
    color: #ff4234;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-block;
    border-bottom: 2px solid #ff42349b;
    padding-bottom: 5px;
}

.tattoo-heading {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 66, 52, 0.3));
}

.tattoo-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 800px; /* Text ko center mein thoda tight rakhne ke liye */
}

/* 3. The Feature Cards */
.why-card {
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 35px 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: crosshair;
}

/* 4. Background Hollow Watermark Numbers */
.watermark-number {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 6rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
    line-height: 1;
    transition: all 0.5s ease;
    z-index: 0;
}

/* Make text inside card sit above the watermark */
.why-title, .why-text {
    position: relative;
    z-index: 1;
}

.why-title {
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.why-text {
    color: #999;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s ease;
}

/* 5. The Animated Glow Line (Bottom) */
.hover-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%; /* Start hiding */
    background: linear-gradient(135deg, #ff4234ac, #ff4234);
    transition: width 0.4s ease;
}

/* 6. Hover Effects - Magic Happens Here */
.why-card:hover {
    transform: translateY(-12px); /* Upar uthega */
    background: rgba(20, 20, 20, 0.9);
    border-color: rgba(255, 66, 52, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9), 0 5px 15px rgba(255, 66, 52, 0.15);
}

.why-card:hover .hover-line {
    width: 100%; /* Bottom ki red line fill hogi */
}

.why-card:hover .why-title {
    color: #ff4234; /* Title ka color red ho jayega */
    text-shadow: 0 0 5px rgba(255, 66, 52, 0.4);
}

.why-card:hover .why-text {
    color: #e0e0e0; /* Description bright ho jayegi */
}

.why-card:hover .watermark-number {
    -webkit-text-stroke: 1px rgba(255, 66, 52, 0.3); /* Watermark red color me chamkega */
    transform: scale(1.1) translate(-10px, 10px);
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    .tattoo-heading {
        font-size: 2.2rem;
    }
    .why-card {
        padding: 25px 20px;
    }
}

    /* 1. Base Section Styles */
.tattoo-process-section {
    background-color: #050505;
    position: relative;
    overflow: hidden;
    color: #fff;
    min-height: 80vh;
}

/* 2. Ambient Background Glow for extra effect */
.ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(255, 66, 52, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: blur(50px);
    animation: pulseGlow 6s infinite alternate;
}

.z-index-2 {
    z-index: 2;
}

/* 3. Typography */
.tattoo-subtext {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    display: block;
}

.tattoo-gradient-heading {
   font-family: 'Cinzel Decorative', serif !important;
    font-size: 35px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 66, 52, 0.3));
}

/* 4. The 3D Flip Card Mechanics */
.tattoo-flip-card {
    background-color: transparent;
    height: 260px;
    perspective: 1000px; /* Gives the 3D depth effect */
    cursor: crosshair;
}

.tattoo-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy flip */
    transform-style: preserve-3d;
}

/* Hovering flips the card */
.tattoo-flip-card:hover .tattoo-flip-inner {
    transform: rotateY(180deg);
}

/* Front & Back Setup */
.tattoo-flip-front, .tattoo-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(255, 66, 52, 0.2);
}

/* Styling the Front of the Card */
.tattoo-flip-front {
    background-color: #0a0a0a;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}

.tattoo-flip-front .step-num {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #ff42349b; /* Hollow glowing text */
    margin-bottom: 10px;
    opacity: 0.5;
    transition: all 0.3s;
}

.tattoo-flip-card:hover .tattoo-flip-front .step-num {
    opacity: 1;
    -webkit-text-stroke: 2px #ff4234;
}

.tattoo-flip-front .step-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Styling the Back of the Card */
.tattoo-flip-back {
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    color: white;
    transform: rotateY(180deg);
    box-shadow: 0 10px 30px rgba(255, 66, 52, 0.4);
}

.tattoo-flip-back p {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

/* 5. Hygiene & Safety Section */
.hygiene-box {
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 66, 52, 0.3);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(255, 66, 52, 0.05);
    transform: translateY(0);
    transition: all 0.4s ease;
}

.hygiene-box:hover {
    box-shadow: 0 0 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(255, 66, 52, 0.15);
    border-color: #ff4234;
}

.hygiene-title {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 66, 52, 0.8);
}

/* Glowing List */
.hygiene-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hygiene-list li {
    font-size: 1.1rem;
    position: relative;
    padding-left: 35px;
    transition: transform 0.3s ease, color 0.3s;
    cursor: default;
}

/* Custom Tattoo Needle/Slash Bullet */
.hygiene-list li::before {
    content: '///';
    position: absolute;
    left: 0;
    top: 2px;
    color: #ff4234;
    font-style: italic;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -2px;
    transition: all 0.3s;
}

/* List Item Hover Effects */
.hygiene-list li:hover {
    transform: translateX(10px);
    color: #ff4234;
}

.hygiene-list li:hover::before {
    text-shadow: 0 0 10px #ff4234;
}

/* 6. Ambient Keyframe Animations */
@keyframes pulseGlow {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tattoo-gradient-heading {
        font-size: 2.2rem;
    }
    .hygiene-box {
        padding: 25px 15px;
    }
    .tattoo-flip-card {
        height: 220px;
    }
}

    /* 1. Main Section Background */
.tattoo-content-section {
    background-color: #050505;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    /* Reduced space */
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 2. Video Box Styling */
.video-box {
    height: 350px;
    border-radius: 8px; /* Slightly sharper edges */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 66, 52, 0.2);
    position: relative;
    z-index: 2;
    background: #000;
}

/* 3. YouTube Loop & Unclickable Settings */
.yt-bg-video {
    width: 100%;
    height: 350px;
    pointer-events: none; /* IMPORTANT: This blocks all clicks, hiding play buttons and keeping it as a visual loop */
    transform: scale(1.2); /* Slightly zoomed in to hide YouTube branding edges */
}

/* 4. Glowing Background behind videos */
.video-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 66, 52, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 1;
    filter: blur(30px);
    border-radius: 50%;
}

/* 5. Typography Styles */
.tattoo-heading {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 35px; /* Reduced from 3.5rem */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 5px rgba(255, 66, 52, 0.2));
}

.tattoo-paragraph {
    font-size: 1rem; /* Slightly reduced */
    line-height: 1.6;
    color: #cccccc !important; /* Slightly softer white */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Align text properly on desktop */
@media (min-width: 992px) {
    .tattoo-paragraph {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 991px) {
    .tattoo-heading {
        font-size: 2.2rem;
    }
}

/* 6. Custom Button Styles */
.tattoo-btn-primary {
    background: linear-gradient(135deg, #ff4234ac, #ff4234);
    color: #ffffff !important;
    padding: 10px 24px; /* Reduced padding */
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: none;
}

.tattoo-btn-primary:hover {
    background: linear-gradient(135deg, #ff4234, #ff4234ac);
    box-shadow: 0 5px 15px rgba(255, 66, 52, 0.4);
    transform: translateY(-2px);
}

.tattoo-btn-outline {
    background: transparent;
    color: #ffffff !important;
    padding: 10px 24px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: 1px solid #ff4234ac;
}

.tattoo-btn-outline:hover {
    background: rgba(255, 66, 52, 0.1);
    color: #ff4234 !important;
    border-color: #ff4234;
}

    /* 1. Main Section with Background Image & Dark Overlay */
.tattoo-dark-section {
    /* Niche URL mein aap apni pasand ki image ka link daal sakte hain */
    background-image: 
        linear-gradient(rgba(5, 5, 5, 0.85), rgba(5, 5, 5, 0.85)), /* Dark overlay for text visibility */
        url('https://images.unsplash.com/photo-1598371839696-5c5bb00bdc28?q=80&w=2000&auto=format&fit=crop'); 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    min-height: 450px; /* Image achhe se dikhane ke liye thodi height badhayi hai */
    display: flex;
    align-items: center;
    overflow: hidden; /* Text jab screen ke bahar jaye to scrollbar na aaye */
}

/* 2. Remove all Box styles from Breadcrumb */
.borderless-breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Text Container Styling */
.raw-text-box {
    display: flex;
    gap: 20px; /* Custom aur Tattoos ke beech ka space */
}

/* Breadcrumb ka default slash (/) hide karna */
.raw-text-box::before {
    display: none !important;
}

/* 4. Text Design (Gradient & Glow directly on text) */
.fly-left, .fly-right {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 3rem; /* Text size thoda aur bada kiya */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Aapka Color directly text par apply kiya hai */
    background: linear-gradient(135deg, #ff4234, #ff42349b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Halka sa text glow effect */
    filter: drop-shadow(0 0 15px rgba(255, 66, 52, 0.5));
}

/* 5. Applying the "Aana aur Jana" Animation */
.fly-left {
    animation: comeAndGoLeft 4s ease-in-out infinite; 
}

.fly-right {
    animation: comeAndGoRight 4s ease-in-out infinite;
}

/* --- THE KEYFRAMES (Ek sath aana aur jana) --- */

/* Custom: Left se aayega aur jayega */
@keyframes comeAndGoLeft {
    0% { transform: translateX(-50vw); opacity: 0; filter: blur(5px); } 
    25%, 75% { transform: translateX(0); opacity: 1; filter: blur(0); } 
    100% { transform: translateX(-50vw); opacity: 0; filter: blur(5px); } 
}

/* Tattoos: Right se aayega aur jayega */
@keyframes comeAndGoRight {
    0% { transform: translateX(50vw); opacity: 0; filter: blur(5px); } 
    25%, 75% { transform: translateX(0); opacity: 1; filter: blur(0); } 
    100% { transform: translateX(50vw); opacity: 0; filter: blur(5px); } 
}