/* =====================================================
   CONTACT PAGE - COMIC STYLES
   ===================================================== */

/* =====================================================
   SECTION 1: CONTACT HERO
   ===================================================== */
.contact-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* background: linear-gradient(135deg, #0f0c29 0%, #1a1a2e 40%, #16213e 100%); */
    background: linear-gradient(135deg, #ef5455 0%, #f2ff00 75%, #16213e 100%);

    padding-top: 80px;
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.contact-hero-bubble {
    margin-bottom: 20px;
}

.contact-hero-title {
    font-size: 5rem;
    line-height: 1.05;
    color: #fff;
    text-transform: uppercase;
    margin: 24px 0;
    font-family: "Bangers", cursive;
    letter-spacing: 3px;
}

.title-line.accent {
    color: #ef5455;
    text-shadow: 4px 4px 0px #ae3e3e;
}

.contact-hero-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    font-family: "Bangers", cursive;
    letter-spacing: 2px;
}

.contact-hero-panel {
    transform: rotate(-2deg);
    box-shadow: 8px 8px 0px #333;
    transition: transform 0.3s;
    border: none;
}

.contact-hero-panel:hover {
    transform: rotate(0deg) scale(1.02);
}

.contact-hero-panel .panel-border {
    display: none;
}

.contact-hero-img {
    width: 100%;
    height: 550px;
    object-fit: contain;
    display: block;
    background: #1a1a2e;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s;
    font-family: "Bangers", cursive;
    font-size: 1rem;
    letter-spacing: 1px;
}

.contact-link:hover {
    border-color: #ef5455;
    background: rgba(254, 237, 0, 0.05);
    transform: translateX(8px);
}

.contact-link i {
    font-size: 1.3rem;
    color: #f2ff00;
    width: 24px;
    text-align: center;
}

.cta-button-contact {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 48px;
    background: linear-gradient(135deg, #feed00, #e6c800);
    color: #111;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    font-family: "Bangers", cursive;
    letter-spacing: 2px;
    border: 3px solid #111;
    box-shadow: 6px 6px 0px #111;
    transition: all 0.2s;
}

.cta-button-contact:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0px #111;
}

.cta-button-contact:active {
    transform: translate(6px, 6px);
    box-shadow: 0px 0px 0px #111;
}

/* =====================================================
   SECTION 2: CONTACT FORM
   ===================================================== */
.form-section {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0c29 100%);
    padding: 40px 0;
}

.form-wrapper {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.form-panel {
    padding: 40px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    color: #feed00;
    margin-bottom: 8px;
    font-family: "Bangers", cursive;
    letter-spacing: 1px;
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-family: "Bangers", cursive;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition:
        border-color 0.3s,
        box-shadow 0.3s;
    outline: none;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-input:focus {
    border-color: #feed00;
    box-shadow: 0 0 20px rgba(254, 237, 0, 0.1);
}

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

.form-submit {
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.form-submit:disabled {
    cursor: not-allowed;
}

.submit-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.form-status {
    padding: 14px 20px;
    border-radius: 10px;
    font-family: "Bangers", cursive;
    font-size: 1rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-status.success {
    background: rgba(78, 204, 163, 0.15);
    border: 2px solid #4ecca3;
    color: #4ecca3;
}

.form-status.error {
    background: rgba(239, 84, 85, 0.15);
    border: 2px solid #ef5455;
    color: #ef5455;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .contact-hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-hero-title {
        font-size: 2.8rem;
    }
    .contact-hero-img {
        height: 350px;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .form-panel {
        padding: 28px 20px;
    }

    .contact-hero,
    .form-section {
        padding: 60px 4%;
    }
}

@media (max-width: 480px) {
    .contact-hero-title {
        font-size: 2.2rem;
        letter-spacing: 1px;
    }
    .contact-hero-img {
        height: 240px;
    }
    .contact-hero-subtitle {
        font-size: 1.2rem;
    }

    .contact-hero,
    .form-section {
        padding: 50px 3%;
    }

    .speech-bubble { padding: 16px 20px; font-size: 1rem; }
    .speech-bubble::after { bottom: -14px; left: 20px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #fff; }
    .issue-tag { font-size: 0.75rem; padding: 5px 14px; letter-spacing: 2px; }
    .section-header { margin-bottom: 40px; }

    .form-input { padding: 12px 14px; font-size: 0.9rem; }
    .form-label { font-size: 0.8rem; }
    .form-panel { padding: 20px 16px; }

    .cta-button-contact { padding: 14px 32px; font-size: 1.1rem; box-shadow: 4px 4px 0px #111; }

    .contact-link { font-size: 0.9rem; padding: 12px 14px; }

    .cs-panel-inner { padding: 40px 16px 50px; min-height: 50vh; }
    .cs-signal-badge { padding: 10px 20px; }
}

@media (max-width: 375px) {
    .contact-hero-title {
        font-size: 1.9rem;
    }
    .contact-hero-img {
        height: 200px;
    }
    .contact-hero,
    .form-section {
        padding: 40px 3%;
    }
    .form-panel { padding: 16px 12px; }
    .cs-panel-inner { padding: 30px 12px 40px; min-height: 40vh; }
    .cs-caption-bar { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
    .cs-caption-bar span { font-size: 0.7rem; }
}

/* =====================================================
   SHARED COMIC UTILITIES
   ===================================================== */

.comic-section {
    position: relative;
    font-family: "Bangers", cursive;
}

.halftone-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 0;
}

.comic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.speed-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    animation: rotate-slow 60s linear infinite;
}

.speed-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(254, 237, 0, 0.08) 40%,
        rgba(254, 237, 0, 0.02) 100%
    );
    transform-origin: left center;
}

.speed-line:nth-child(1) {
    transform: rotate(0deg);
}
.speed-line:nth-child(2) {
    transform: rotate(30deg);
}
.speed-line:nth-child(3) {
    transform: rotate(60deg);
}
.speed-line:nth-child(4) {
    transform: rotate(90deg);
}
.speed-line:nth-child(5) {
    transform: rotate(120deg);
}
.speed-line:nth-child(6) {
    transform: rotate(150deg);
}
.speed-line:nth-child(7) {
    transform: rotate(180deg);
}
.speed-line:nth-child(8) {
    transform: rotate(210deg);
}
.speed-line:nth-child(9) {
    transform: rotate(240deg);
}
.speed-line:nth-child(10) {
    transform: rotate(270deg);
}
.speed-line:nth-child(11) {
    transform: rotate(300deg);
}
.speed-line:nth-child(12) {
    transform: rotate(330deg);
}

.speed-line:nth-child(odd) {
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 107, 107, 0.06) 40%,
        rgba(255, 107, 107, 0.01) 100%
    );
}

.speed-line:nth-child(3n) {
    height: 1px;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 40%,
        transparent 100%
    );
}

@keyframes rotate-slow {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.comic-starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(254, 237, 0, 0.03) 5deg,
        transparent 10deg,
        transparent 15deg,
        rgba(254, 237, 0, 0.02) 20deg,
        transparent 25deg,
        transparent 30deg,
        rgba(254, 237, 0, 0.03) 35deg,
        transparent 40deg,
        transparent 45deg,
        rgba(254, 237, 0, 0.02) 50deg,
        transparent 55deg,
        transparent 60deg,
        rgba(254, 237, 0, 0.03) 65deg,
        transparent 70deg,
        transparent 75deg,
        rgba(254, 237, 0, 0.02) 80deg,
        transparent 85deg,
        transparent 90deg,
        rgba(254, 237, 0, 0.03) 95deg,
        transparent 100deg,
        transparent 105deg,
        rgba(254, 237, 0, 0.02) 110deg,
        transparent 115deg,
        transparent 120deg,
        rgba(254, 237, 0, 0.03) 125deg,
        transparent 130deg,
        transparent 135deg,
        rgba(254, 237, 0, 0.02) 140deg,
        transparent 145deg,
        transparent 150deg,
        rgba(254, 237, 0, 0.03) 155deg,
        transparent 160deg,
        transparent 165deg,
        rgba(254, 237, 0, 0.02) 170deg,
        transparent 175deg,
        transparent 180deg,
        rgba(254, 237, 0, 0.03) 185deg,
        transparent 190deg,
        transparent 195deg,
        rgba(254, 237, 0, 0.02) 200deg,
        transparent 205deg,
        transparent 210deg,
        rgba(254, 237, 0, 0.03) 215deg,
        transparent 220deg,
        transparent 225deg,
        rgba(254, 237, 0, 0.02) 230deg,
        transparent 235deg,
        transparent 240deg,
        rgba(254, 237, 0, 0.03) 245deg,
        transparent 250deg,
        transparent 255deg,
        rgba(254, 237, 0, 0.02) 260deg,
        transparent 265deg,
        transparent 270deg,
        rgba(254, 237, 0, 0.03) 275deg,
        transparent 280deg,
        transparent 285deg,
        rgba(254, 237, 0, 0.02) 290deg,
        transparent 295deg,
        transparent 300deg,
        rgba(254, 237, 0, 0.03) 305deg,
        transparent 310deg,
        transparent 315deg,
        rgba(254, 237, 0, 0.02) 320deg,
        transparent 325deg,
        transparent 330deg,
        rgba(254, 237, 0, 0.03) 335deg,
        transparent 340deg,
        transparent 345deg,
        rgba(254, 237, 0, 0.02) 350deg,
        transparent 355deg
    );
    border-radius: 50%;
    animation: pulse-starburst 8s ease-in-out infinite;
}

@keyframes pulse-starburst {
    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.halftone-dots {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            circle,
            rgba(254, 237, 0, 0.06) 1.5px,
            transparent 1.5px
        ),
        radial-gradient(circle, rgba(255, 107, 107, 0.04) 1px, transparent 1px);
    background-size:
        24px 24px,
        36px 36px;
    background-position:
        0 0,
        12px 12px;
    animation: drift-dots 20s linear infinite;
}

@keyframes drift-dots {
    0% {
        background-position:
            0 0,
            12px 12px;
    }
    100% {
        background-position:
            24px 24px,
            36px 36px;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.issue-tag {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 6px 20px;
    font-size: 0.85rem;
    letter-spacing: 3px;
    border: 2px solid #333;
    margin-bottom: 16px;
    font-family: "Bangers", cursive;
}

.section-title {
    font-size: 3.5rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    font-family: "Bangers", cursive;
    letter-spacing: 2px;
}

.accent {
    color: #feed00;
}

.comic-panel {
    position: relative;
    background: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
}

.panel-border {
    position: absolute;
    inset: 0;
    border: 4px solid #fff;
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

.panel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-align: center;
    font-family: "Bangers", cursive;
    z-index: 3;
}

.speech-bubble {
    position: relative;
    background: #fff;
    color: #111;
    border-radius: 20px;
    padding: 20px 28px;
    font-size: 1.1rem;
    line-height: 1.5;
    border: 3px solid #111;
    box-shadow: 4px 4px 0px #111;
    font-family: "Bangers", cursive;
    letter-spacing: 0.5px;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 18px solid #fff;
    filter: drop-shadow(2px 3px 0px #111);
}

.title-line {
    display: block;
}

@media (max-width: 1024px) {
    .section-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
}

/* wael signal contact  */


/* #EF5455 */
/* #ecd100 */
.comic-signal-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    /* background: #111; */
    /* background: linear-gradient(135deg, #f2ff00 0%, #ef5455 40%, #16213e 100%); */
    background: #ecd100;


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

.cs-halftone {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 238, 0, 0.06) 1.5px,
        transparent 1.5px
    );
    background-size: 8px 8px;
    z-index: 1;
}

.cs-panel {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    border: 6px solid #000;
    border-radius: 18px;
    background: #0a0a0a;
    overflow: hidden;
    box-shadow: 10px 10px 0 #000;
}

.cs-panel-inner {
    position: relative;
    padding: 60px 40px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-height: 70vh;
}

/* Comic night sky */
.cs-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(254, 237, 0, 0.04) 0%,
            transparent 50%
        ),
        linear-gradient(180deg, #0d0f1a 0%, #141829 40%, #0d0f1a 100%);
    z-index: 0;
}

.cs-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(2px 2px at 10% 12%, #fff, transparent),
        radial-gradient(
            1.5px 1.5px at 22% 6%,
            rgba(255, 255, 255, 0.7),
            transparent
        ),
        radial-gradient(2px 2px at 38% 18%, #fff, transparent),
        radial-gradient(
            1px 1px at 55% 8%,
            rgba(255, 255, 255, 0.6),
            transparent
        ),
        radial-gradient(2px 2px at 70% 14%, #fff, transparent),
        radial-gradient(
            1.5px 1.5px at 85% 20%,
            rgba(255, 255, 255, 0.7),
            transparent
        ),
        radial-gradient(
            1px 1px at 15% 28%,
            rgba(255, 255, 255, 0.5),
            transparent
        ),
        radial-gradient(2px 2px at 92% 10%, #fff, transparent),
        radial-gradient(
            1px 1px at 45% 30%,
            rgba(255, 255, 255, 0.4),
            transparent
        ),
        radial-gradient(
            1.5px 1.5px at 78% 32%,
            rgba(255, 255, 255, 0.6),
            transparent
        );
    animation: cs-twinkle 3s ease-in-out infinite alternate;
}

@keyframes cs-twinkle {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Signal text */
.cs-signal-badge {
    position: relative;
    z-index: 5;
    display: inline-block;
    padding: 14px 40px;
    background: #EF5455;
    border: 4px solid #000;
    border-radius: 50px;
    box-shadow: 6px 6px 0 #000;
    transform: rotate(-3deg);
    animation: cs-pulse 2.5s ease-in-out infinite;
}

.cs-signal-text {
    font-family: "Bangers", cursive;
    font-size: clamp(1.4rem, 4vw, 3rem);
    color: #ffffff;
    letter-spacing: 3px;
    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #EF5455;
    line-height: 1;
    white-space: nowrap;
}

@keyframes cs-pulse {
    0%,
    100% {
        transform: rotate(-3deg) scale(1);
    }
    50% {
        transform: rotate(-3deg) scale(1.03);
    }
}

/* Beam */
.cs-beam-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    max-width: 500px;
    height: 85%;
    z-index: 3;
    animation: cs-sway 8s ease-in-out infinite;
}

@keyframes cs-sway {
    0%,
    100% {
        transform: translateX(-50%) rotate(-4deg);
    }
    50% {
        transform: translateX(-50%) rotate(4deg);
    }
}

.cs-beam {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    clip-path: polygon(42% 100%, 58% 100%, 100% 0%, 0% 0%);
    background: linear-gradient(
        to top,
        rgba(254, 237, 0, 0.5) 0%,
        rgba(254, 237, 0, 0.2) 20%,
        rgba(254, 237, 0, 0.08) 50%,
        rgba(254, 237, 0, 0) 100%
    );
}

.cs-beam-halftone {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(254, 237, 0, 0.3) 1px,
        transparent 1px
    );
    background-size: 6px 6px;
    clip-path: polygon(42% 100%, 58% 100%, 100% 0%, 0% 0%);
    opacity: 0.6;
}

/* Glow at base */
.cs-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 120px;
    height: 40px;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse,
        rgba(254, 237, 0, 0.7) 0%,
        transparent 70%
    );
    border-radius: 50%;
    z-index: 4;
    animation: cs-glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes cs-glow-pulse {
    0% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
    }
}

/* Comic burst behind signal */
.cs-burst {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    z-index: 4;
    opacity: 0.15;
}

.cs-burst-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 4px;
    background: #feed00;
    transform-origin: 0 50%;
}

.cs-burst-ray:nth-child(1) {
    transform: rotate(0deg);
}
.cs-burst-ray:nth-child(2) {
    transform: rotate(30deg);
}
.cs-burst-ray:nth-child(3) {
    transform: rotate(60deg);
}
.cs-burst-ray:nth-child(4) {
    transform: rotate(90deg);
}
.cs-burst-ray:nth-child(5) {
    transform: rotate(120deg);
}
.cs-burst-ray:nth-child(6) {
    transform: rotate(150deg);
}
.cs-burst-ray:nth-child(7) {
    transform: rotate(180deg);
}
.cs-burst-ray:nth-child(8) {
    transform: rotate(210deg);
}
.cs-burst-ray:nth-child(9) {
    transform: rotate(240deg);
}
.cs-burst-ray:nth-child(10) {
    transform: rotate(270deg);
}
.cs-burst-ray:nth-child(11) {
    transform: rotate(300deg);
}
.cs-burst-ray:nth-child(12) {
    transform: rotate(330deg);
}

/* Bottom caption bar */
.cs-caption-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding: 16px 24px;
    background: #f75f60;
    border-top: 4px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.cs-caption-bar span {
    font-family: "Bangers", cursive;
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cs-caption-bar .cs-dot {
    width: 8px;
    height: 8px;
    background: #feed00;
    border-radius: 50%;
    border: 2px solid #000;
    flex-shrink: 0;
}

/* Corner issue tag */
.cs-issue-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 7;
    padding: 6px 14px;
    background: #000;
    border: 3px solid #feed00;
    border-radius: 8px;
    font-family: "Bangers", cursive;
    font-size: 0.75rem;
    color: #feed00;
    letter-spacing: 2px;
}

/* Halftone overlay on entire panel */
.cs-panel-halftone {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.12) 1px,
        transparent 1px
    );
    background-size: 5px 5px;
    opacity: 0.4;
}

/* Panel border accents */
.cs-panel::before {
    content: "";
    position: absolute;
    inset: -6px;
    border: 3px dashed rgba(254, 237, 0, 0.15);
    border-radius: 22px;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 600px) {
    .cs-panel-inner {
        padding: 40px 20px 60px;
        min-height: 60vh;
    }
    .cs-signal-badge {
        padding: 10px 24px;
    }
    .cs-beam-wrap {
        width: 80vw;
    }
}
/* wael signal contact  */