/* Shared styles for all screen sizes */

/* Base colors and visual styles */
.hero {
    background: url('../images/background.gif') center center/cover no-repeat fixed;
    background-size: cover;
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 9, 19, 0.7);
    z-index: -1;
}

.shadow {
    text-shadow: 2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    0 2px 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    -2px 0 0 #000,
    4px 4px 8px rgba(0, 0, 0, 0.9);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1),
     3px 3px 6px rgba(0, 0, 0, 0.8);        
}

.glow {
    font-weight: 7000;
     
}




/* Call to action button styles */
.cta-button {
    background: #000000;
    border: 2px solid #ffffff;  /* changed from #00ffff to #ffffff */
    color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
    width: 280px; /* reduced width */
    height: 85px;
    padding: 0 40px; /* slightly reduced padding */
    border-radius: 18px;
    position: relative;
    display: flex;    /* add flex */
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;  /* prevent text overflow */
}

.cta-container {
    text-align: center;
    width: 100%;
    padding: 25px 0;
    display: flex;
    justify-content: center;
    gap: 30px;        /* reduced gap */
}

.cta-button i {
    color: #00ffff;  /* changed back to cyan */
    font-size: 2.6em; /* slightly larger icon */
    margin-right: 10px; /* reduced margin */
    position: relative; /* change from absolute */
    flex-shrink: 0;
    width: 40px; /* slightly smaller icon width */
}

.cta-button span {
    color: #ffffff;
    font-size: 1.7em; /* bigger text */
    font-weight: 600;
    position: relative; /* change from absolute */
    line-height: 1.2; /* tighter line height */
    flex-grow: 1;     /* allow text container to grow */
    text-align: center; /* center the text */
    padding-right: 5px; /* reduced padding */
    margin-left: 5px; /* small offset from icon */
}

.cta-button:hover {
    border-color: #00ffff;  /* changed from #ffffff to #00ffff */
    transform: translateY(-2px); /* slight lift effect */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.cta-button i,
.cta-button span {
    transition: all 0.3s ease;
}

.cta-button:hover i,
.cta-button:hover span {
    color: #00ffff;
}

.cta-button:hover i {
    color: #ffffff;  /* changed to white */
}