/* ============================================================================
 * site.css — pruned from the original directsystems.com site.css.
 * Only rules whose selectors are actually used by the Razor pages are kept.
 * See site-overrides.css for ASP.NET-specific additions layered on top.
 *
 * Removed in this pass:
 *   - Dashboard / portal styles  (.portal-title, .dashboard-container,
 *     .welcome-card, .notifications-card, .quick-actions, .recent-activity,
 *     .company-notices, .stats-grid, .stat-box) — staff-portal only
 *   - NetTalk form button styling (#*ContactForm_saveset .nt-save-button,
 *     button[name="newSend"], .supportcontactform-newsend-row, etc.)
 *   - Unused background utility (.bg-custom4)
 *   - Unused parallax variant (.parallax-demo, .parallax2)
 *   - Unused helpers (.bomgar, .center-flex, .sr-only, .cardscroll,
 *     .nt-body, .news, .news-scroll a, .dot, .donotremove)
 *   - Unused FontAwesome 4 brand-color rules (.fa, .fa-facebook,
 *     .fa-linkedin, .fa-google) — markup uses FA6 .fab brand icons
 *   - 1024px media query (only targeted removed selectors)
 * ============================================================================ */


/* ===== Typography (kept — gives Direct Systems heading sizes) ===== */
h1, h2, h3 {
    margin: 0 0 .5rem 0;
    font-weight: 600;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; color: #555; }
h3 { font-size: 1.2rem; color: #666; }


/* ===== AOS scroll animations ===== */
[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos]:not(.aos-animate) {
    opacity: 0;
    transform: translateY(50px);
}


/* ===== News ticker carousel (home page) ===== */
#newsTickerCarousel {
    max-width: 960px;
    margin: 0 auto;
}

#newsTickerCarousel .carousel-item {
    height: 360px;
    overflow-y: auto;
    padding: 1rem;
    text-align: left;
}

#newsTickerCarousel .carousel-item .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#newsTickerCarousel .carousel-item .card-body {
    overflow-y: auto;
    padding: 1rem;
    max-height: 360px;
}

#newsTickerCarousel iframe,
#newsTickerCarousel .embed-responsive,
#newsTickerCarousel .embed-responsive-item {
    width: 100%;
    max-width: 100%;
    height: auto;
}

#newsTickerCarousel .card-body p,
#newsTickerCarousel .card-body ul {
    margin-bottom: 1rem;
    word-wrap: break-word;
}

#newsTickerCarousel .card-body img,
#newsTickerCarousel .card-body iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

#newsTickerCarousel .carousel-inner {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

#newsTickerCarousel .carousel-control-prev,
#newsTickerCarousel .carousel-control-next {
    width: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.75;
}

#newsTickerCarousel .carousel-control-prev-icon,
#newsTickerCarousel .carousel-control-next-icon {
    background-size: 100% 100%;
}

#newsTickerCarousel .card-body iframe,
#newsTickerCarousel .card-body .embed-responsive {
    max-height: none;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

/* Fullscreen toggle for news card */
#newsTickerCarousel .carousel-item.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 1050;
    padding: 2rem;
    overflow-y: auto;
}

#newsTickerCarousel .carousel-item.fullscreen .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#newsTickerCarousel .carousel-item.fullscreen .card-body {
    flex-grow: 1;
    overflow-y: auto;
    max-height: none;
}

#newsTickerCarousel .carousel-item.fullscreen .card-footer {
    margin-top: auto;
}


/* ===== Parallax bands ===== */
.parallax1 {
    background-image: url("/images/RoadWall4a.jpg");
    height: 280px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top: 1px solid #FF0000;
    padding-top: 115px;
}

.parallax3 {
    background-image: url("/images/RoadWall4a.jpg");
    height: 200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 30px;
}


/* ===== Body + container offsets ===== */
.mjs-body {
    padding-top: 90px;
    background-color: #0C3C60;
}

.clientcontainer {
    margin-top: 70px;
}


/* ===== Embedded Google map (16:9 responsive) ===== */
.map-container {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}


/* ===== Image-only hero carousel (#myCarousel on home) ===== */
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel-caption {
    top: 40%;
    bottom: auto;
    padding-bottom: 500px;
}

.img-carousel {
    min-width: 800px;
}

#myCarousel .carousel-item {
    height: 30vh;
}

#myCarousel .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* ===== Navbar ===== */
.navbar-custom {
    background-color: #0C3C60;
}

.navbar-custom .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .8);
}

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

.custom-toggler.navbar-toggler {
    border-color: white;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/* ===== Brand colour utilities ===== */
.text-custom {
    color: rgb(76, 129, 165, 1);
}

.bg-custom {
    background-color: #0C3C60;
}

.bg-custom2 {
    background-color: rgba(57, 115, 155, .9);
}

.bg-custom3 {
    background-color: rgba(57, 115, 155, .5);
}


/* ===== Inline link colours used in footer & contact blocks ===== */
.mailwhite {
    color: white;
    text-decoration: none;
}

.telwhite {
    color: white;
    text-decoration: none;
}

.telblack {
    color: black;
    text-decoration: none;
}


/* ===== Misc ===== */
.btn {
    margin: 0%;
}

.customer-map {
    min-width: 100%;
}